JAMstack

— это архитектурный подход, который отделяет уровень веб-интерфейса от данных и бизнес-логики, повышая гибкость, масштабируемость, производительность и удобство обслуживания.

«JAM» в JAMstack означает JavaScript, API и разметку. Модель архитектуры JAMstack делает создание веб-приложений менее затратным и более безопасным, с лучшей производительностью и масштабируемостью.

Jamstack устраняет необходимость в бизнес-логике, определяющей работу в Интернете. Он обеспечивает компонуемую архитектуру для Интернета, в которой пользовательская логика и сторонние службы используются через API. Официальный сайт

JAMstack не требует от вас переключения на какую-либо конкретную технологию. Вы можете использовать любую библиотеку JavaScript или технологию, которая компилируется в JavaScript (например, TypeScript, Elm, Clojure или WebAssembly). JavaScript может извлекать данные или отправлять обновления сторонним API, вашему собственному API, бессерверным функциям или любой комбинации API. Для управления контентом вы можете выбирать из множества генераторов статических сайтов, таких как Hugo, GatsbyJS, Jekyll, Next.js, Nuxt.js или VuePress, и писать контент с помощью Markdown или любой другой системы разметки, которая отображается как HTML.

JAMstack — это быстро, масштабируемо и дешевле

При использовании подхода JAMstack каждая страница компилируется (или создается) заранее, когда приложение развертывается. Все HTML, JavaScript, CSS и изображения, необходимые для приложения, полностью «запекаются» заранее. Цель состоит в том, чтобы избежать как можно большего количества кода, исполняемого сервером, поскольку обслуживание статических файлов быстрее и намного проще, чем выполнение кода на стороне сервера.

Эти статические файлы могут быть дополнительно глобально кэшированы в сети доставки контента (CDN). Большая часть трафика приходится на CDN, что дает значительную экономию средств по сравнению с обслуживанием собственной серверной инфраструктуры. Кроме того, посетители получают контент с ближайших к ним серверов, что может сильно повлиять на отзывчивость, удовлетворенность и конверсию!

Как работает Jamstack

Браузер запрашивает страницу.
Загружает собранный html, потому что SSR.
Контент обновляется при передаче контента в Git или Headless CMS.
Сайт автоматически пересобирается генератора статических сайтов (к примеру hugo).

Headless CMS по сути реализует паттерн микросервесной архитектуры на беке.

Согласно подхода Jamstack пользователи получают доступ к статическому HTML. Этот статический HTML может быть доставлен через CDN, без сложных серверных приложений и баз данных, что обеспечивает очень стабильную архитектуру.

Из-за отсутствия серверов веб-приложений, серверов баз данных, стоимость разработки Jamstack значительно быстреее и меньше по сравнению с обычным подходом.

netlify.com — отличный хостинг

Плагины для e-commerce

snipcart.com
foxy.io
Moltin
Shopify’s Buy Button

Плагины для форм

formkeep.com
typeform.com
formspree.io
netlify.com

Плагины поиска

algolia.com
Google Custom Search
Fuse.js
Lunr.js
List.js

Плагины для комментариев

Staticman

https://github.com/agarrharr/awesome-static-website-servicesпочти все, что вам может понадобиться при разработке статического сайта.

На основанни своего опыта скажу об удачном сочетании в рамках архитектуры JAMstack

hugo + gitlab + forestry + netlify

При подготовке статьи использованы материалы: