JAMstack: быстрые сайты без тяжёлой CMS — что это и кому подходит

Большинство сайтов в рунете работают на WordPress, 1С-Битрикс или MODX. Это удобно и привычно, но за удобство приходится платить скоростью, безопасностью и постоянными обновлениями. Есть другой подход — JAMstack. Разберём без лишних терминов, что это такое, какие выгоды он даёт бизнесу и в каких случаях лучше остаться на классической CMS.

Что такое JAMstack простыми словами

JAMstack — это способ строить сайты, при котором страницы собираются заранее, а не в момент, когда их открывает посетитель. Название складывается из трёх частей: JavaScript, API и Markup (готовая HTML-разметка).

Классическая CMS работает так: человек открывает страницу, сервер запускает PHP, делает запросы к базе данных, собирает HTML и только потом отдаёт его в браузер. И так на каждый просмотр каждой страницы.

В JAMstack всё наоборот. Когда вы меняете контент, специальная программа — генератор статических сайтов — один раз собирает все страницы в готовые HTML-файлы. Посетитель получает уже готовую страницу: серверу не нужно ничего вычислять, он просто отдаёт файл. Всё динамическое — формы, бронирование, оплата, поиск — подключается через API внешних сервисов или небольших обработчиков.

Какие выгоды это даёт бизнесу

• Скорость. Готовая страница отдаётся мгновенно: нет запросов к базе и тяжёлых плагинов. Быстрый сайт меньше теряет посетителей на мобильном интернете и лучше ранжируется в поиске.
• Безопасность. На сервере нет базы данных и открытой админки, которые обычно и взламывают. Нечего подбирать, нет уязвимых плагинов — взломать набор HTML-файлов практически невозможно.
• Дешёвый и надёжный хостинг. Статике не нужен мощный сервер с PHP и MySQL: её можно разместить на самом простом хостинге или CDN, и сайт спокойно выдержит наплыв посетителей после рекламы.
• Меньше поломок. Нет ежемесячных обновлений ядра и десятков плагинов, после которых «что-то отвалилось». Сайт работает годами в том виде, в каком его сдали.
• Хорошая база для SEO. Чистая разметка без мусора от конструкторов, быстрые страницы и полный контроль над мета-тегами и микроразметкой.

А как же редактировать контент без программиста?

Это главный вопрос, который мне задают. Ответ — headless CMS: отдельная админка, в которой менеджер редактирует тексты, цены, фотографии и страницы так же, как в WordPress. Разница только в том, что после сохранения сайт автоматически пересобирается — обычно это занимает от нескольких секунд до пары минут.

Для небольших сайтов я использую Decap CMS: она хранит контент прямо в Git-репозитории проекта и не требует отдельного сервера и базы данных. Для сайтов посложнее — Strapi или Payload CMS: полноценные админки с ролями, медиатекой и сложной структурой данных.

Формы, бронирование и оплата на статическом сайте

Статический сайт не значит «сайт без функций». Всё интерактивное работает через внешние сервисы и API:

• формы заявок отправляются в небольшой обработчик на сервере, на почту или сразу в CRM — Битрикс24, amoCRM;
• онлайн-бронирование, продажа билетов и запись подключаются виджетами профильных сервисов;
• оплата — через платёжные системы вроде ЮKassa;
• поиск по сайту, комментарии, чат — через готовые сервисы или собственный API.

Пример JAMstack-сайта: гостиница «Фатима» в Казани

Сайт fatima-kazan.ru раньше работал на WordPress с конструктором Elementor: тяжёлые страницы, лишние скрипты конструктора и накопившиеся за годы ошибки вёрстки. Я перенёс его на генератор статики Hugo с админкой Decap CMS и сверстал всё с нуля. Что получила гостиница:

• Скорость вместо тормозов. 92 балла Google PageSpeed за производительность — вместо тяжёлых страниц конструктора посетитель сразу видит номера и цены.
• 100 баллов за SEO. Чистая разметка, мета-теги, карта сайта и микроразметка Schema.org для гостиницы: поисковики понимают, что это отель, с адресом и контактами.
• Переезд без потери позиций. Адреса страниц остались прежними, поэтому сайт не просел в поиске после смены движка.
• Онлайн-бронирование на месте. Виджет Bnovo с реальными ценами и наличием номеров по датам продолжает работать прямо на страницах статического сайта.
• Администратор правит сайт сам. В Decap CMS есть разделы «Настройки сайта», «Страницы» и «Номера»: номера и их описания, фотографии, правила проживания, SEO главной страницы и настройки бронирования меняются без программиста.
• Нет WordPress — нет проблем WordPress. Никаких обновлений плагинов, уязвимостей и «белого экрана» после очередного апдейта.
• Работает как приложение. Сайт сделан как PWA и устанавливается на экран телефона.

Пример JAMstack-сайта: шоу «Майкл Джексон: Легенда»

Сайт mjshow.ru я сделал под ключ — от дизайна до админки. Он собран генератором Hugo, контентом управляет Decap CMS, а на хостинг выкладывается только готовая статика. Вот что это даёт организатору шоу и зрителям:

• Мгновенная загрузка. Главная страница — это готовый HTML весом около 50 КБ: никакого PHP и запросов к базе. Зрители приходят из соцсетей и рекламы с телефона — и сразу видят афишу, а не белый экран.
• Работает как приложение. Сайт сделан как PWA: его можно установить на экран телефона с иконкой, а service worker кэширует страницы, поэтому повторные визиты открываются ещё быстрее.
• Билеты прямо на странице. Покупка встроена через виджет Яндекс Афиши с картой зала и ценами по секторам — зрителю не нужно уходить на сторонний сайт.
• Организатор правит сайт сам. Даты показов, программу шоу, фотографии, реквизиты и страницы он меняет в админке Decap CMS — без программиста и без отдельного сервера под бэкенд.
• Нечего взламывать и нечего обновлять. На хостинге нет базы данных, PHP и плагинов — только файлы. Сайт не требует ежемесячных обновлений и не ломается от них.
• Недорогой хостинг. Статике не нужен мощный сервер, а наплыв зрителей в день старта продаж ей не страшен — файлы просто отдаются, ничего не вычисляется.

Да и сайт, который вы сейчас читаете, выкладывается на хостинг как готовая статика: страницы собираются заранее из CMS, поэтому открываются мгновенно.

Как подключается Decap CMS

Decap CMS (раньше называлась Netlify CMS) — бесплатная админка с открытым кодом, которая подключается к статическому сайту на Hugo, Next.js, Astro, Eleventy и другим генераторам. Для неё не нужен отдельный сервер, PHP или база данных: контент хранится прямо в Git-репозитории сайта. Вот как это устроено на практике:

• Админка живёт по адресу ваш-сайт.ru/admin. Менеджер входит через аккаунт GitLab или GitHub — отдельные пароли и пользователи на сервере не нужны.
• Разделы админки настраиваются под ваш сайт. На mjshow.ru это «Настройки», «Реквизиты», «Показы», «Программа», «Фотографии» и «Страницы» с полями «дата», «город», «площадка», «ссылка на билеты». На fatima-kazan.ru — «Настройки сайта», «Страницы» и «Номера» с ценами, фото и правилами проживания.
• Тексты редактируются в визуальном редакторе, фотографии загружаются перетаскиванием — работать с ней не сложнее, чем с WordPress.
• После нажатия «Опубликовать» правка сохраняется в репозиторий, сайт автоматически пересобирается и через минуту-две изменения видны всем.
• Каждая правка сохраняется в истории Git: всегда видно, кто и что поменял, и любое изменение можно откатить.
• Можно включить режим черновиков и согласования — правки сначала проверяет ответственный, а потом они попадают на сайт.

Подключить Decap CMS можно и к уже существующему статическому сайту: я настраиваю коллекции под структуру контента, авторизацию через GitLab или GitHub и автоматическую сборку с выкладкой на хостинг. В итоге у сайта появляется удобная админка, а скорость и безопасность статики сохраняются.

Когда JAMstack не подходит

У подхода есть границы, и честнее сказать о них заранее. Классическая CMS или фреймворк будут лучше, если:

• это большой интернет-магазин с тысячами товаров, остатками и ценами, которые меняются каждый час, и обменом с 1С;
• нужны личные кабинеты, роли пользователей и сложная бизнес-логика на сервере;
• контент обновляется постоянно и многими людьми — например, новостной портал или доска объявлений;
• проект уже держится на готовых модулях CMS, и переписывать их нет смысла.

В таких случаях я делаю проект на 1С-Битриксе, OpenCart или Laravel — инструмент подбирается под задачу, а не наоборот.

Кому стоит присмотреться к JAMstack

• лендингам и сайтам услуг, где важны скорость и заявки;
• корпоративным сайтам и сайтам-визиткам, которые обновляются несколько раз в месяц;
• сайтам мероприятий, гостиниц, ресторанов, клиник;
• блогам и экспертным сайтам, которым нужен быстрый старт в поиске;
• владельцам сайтов на WordPress или конструкторах, которые устали от тормозов, обновлений и взломов.

Если сомневаетесь, подойдёт ли JAMstack вашему проекту, — напишите мне. Разберу задачу и честно скажу, что будет выгоднее: статический сайт с удобной админкой или классическая CMS.