Headless CMS: что это простыми словами и когда она нужна бизнесу

Маркетолог хочет добавить на главную новый блок с акцией. Дизайнер уже нарисовал его, текст готов. А программист говорит: «Шаблон движка так не умеет, нужно переписывать тему, это недели две». В другой компании наоборот: сайт быстрый и красивый, но любую запятую правит только разработчик, потому что админки нет вовсе.

Где-то между этими крайностями и появляется слово headless. Headless CMS — это система управления сайтом без собственной «витрины»: она хранит тексты, фото, товары и отдаёт их по запросу, а внешний вид сайта делают отдельно. Английское headless переводится как «безголовая»: «головой» здесь называют ту часть сайта, которую видит посетитель.

Ниже простыми словами объясним, как это устроено, что даёт бизнесу, какие у такой схемы минусы и в каких случаях она вам точно не нужна.

Сначала про обычную CMS. Это движок сайта с админкой: WordPress, 1С-Битрикс, конструкторы вроде Тильды. В них всё живёт вместе. Тексты, картинки, дизайн страниц и код, который показывает их посетителю, лежат в одной большой коробке.

Это похоже на ресторан, где кухня и зал находятся в одном помещении. Повар готовит и сам решает, на каких тарелках подавать и какие стулья поставить. Удобно, пока ресторан один и меню не меняется.

Headless CMS разделяет кухню и зал. Кухня отвечает только за еду: хранит продукты и готовит блюда. Залов может быть сколько угодно, и каждый оформлен по-своему: основной ресторан, доставка, точка в торговом центре. Все берут еду с одной кухни.

В переводе на сайт:

• Кухня означает админку. В ней менеджер заводит услуги, товары, статьи, цены, фото.
• Зал означает сайт, который видит посетитель. Его программируют отдельно, обычно на современных технологиях вроде React и Next.js.
• Окно выдачи между ними называется API. Через него сайт забирает из админки нужные данные: «дай список услуг», «дай статью с таким адресом».

Важно: «без головы» не значит «без админки». Админка как раз есть, и в ней может быть удобно работать. Просто она не решает, как выглядит сайт. Это решают дизайнер и разработчик.

Разница лучше видна, если сравнить по тем вопросам, которые волнуют владельца сайта.

Многие классические движки, кстати, умеют работать и в «безголовом» режиме. У WordPress, например, есть встроенный API, через который отдельный сайт может забирать записи и страницы. Так что headless — это скорее способ устройства сайта, чем конкретная программа.

Сама по себе архитектура никого не интересует. Интересно, что меняется в деньгах, сроках и нервах. Вот что обычно получает бизнес.

Как это выглядит в жизни. Производитель продаёт через сайт и через сеть дилеров. Раньше цены и описания жили в трёх местах: на сайте, в кабинете дилера и в каталоге для выставочного экрана. Менеджер правил их трижды и всё равно где-то забывал. С headless-админкой карточку товара меняют один раз, и она обновляется везде.

Про скорость стоит сказать отдельно. Медленный сайт теряет посетителей, особенно с мобильного интернета. В связке headless CMS и Next.js страницы часто собирают заранее и обновляют, только когда в админке что-то поменяли. Поисковики при этом получают готовый HTML, то есть обычную страницу с текстом, а не пустую заготовку, которую ещё нужно достраивать. Почему скорость так влияет на заявки, мы подробно разбирали в статье про скорость загрузки сайта.

Headless часто продают как решение всех проблем. Это не так. У схемы есть минусы, и о них лучше знать до старта.

Нужен разработчик в команде. Захотели новый тип блока, например калькулятор или слайдер с отзывами? Его нужно запрограммировать на стороне сайта и добавить в админку. В WordPress вы бы поставили плагин за вечер. Здесь это задача для разработчика.

Нет визуального редактора из коробки. Менеджер заполняет поля: заголовок, текст, фото. Как это будет выглядеть, он видит после публикации. Предпросмотр страницы можно сделать, но его настраивают отдельно, и это нужно сразу заложить в работу.

Две системы вместо одной. Админка и сайт живут отдельно. Обе нужно где-то разместить, обновлять и следить за ними. Если админка упала, сайт часто продолжает работать на уже собранных страницах, но новые правки не публикуются. Для небольшого сайта всё это лишняя сложность.

Меньше готовых решений. Формы, мета-теги для поисковиков, карта сайта, редиректы. В обычной CMS это ставится плагином, здесь делается руками. Один раз, но делается.

Зависимость от тех, кто это собрал. Если разработчик ушёл и не оставил документацию, новому придётся сначала разбираться. С популярным движком найти замену обычно проще.

Получается так: headless дороже на старте и требует постоянного технического сопровождения. Зато дешевле в развитии, если сайт сложный и постоянно меняется.

Простое правило: чем сложнее и живее проект, тем больше смысла в headless. Чем проще и стабильнее, тем меньше.

А вот когда headless почти наверняка не нужна:

• Визитка или лендинг. Пара страниц, которые меняются раз в полгода. Здесь хватит конструктора или простой CMS.
• Нет бюджета на сопровождение. Если после запуска никто не будет поддерживать сайт, сложная схема быстро станет обузой.
• Нужно запуститься за неделю. Готовая тема на популярном движке будет быстрее.
• Типовой магазин без особенностей. Если стандартная платформа закрывает всё, переплачивать за гибкость незачем.

Честный ответ на вопрос «нужна ли нам headless» часто звучит как «пока нет». И это нормально.

Если решили, что схема вам подходит, дальше выбирают, на чём делать админку. Вариантов три.

Облачные сервисы. Админка живёт на серверах поставщика, вы платите подписку. Быстро стартовать, ничего не нужно размещать самим. Но большинство известных облачных headless CMS зарубежные. Для российской компании это вопросы с оплатой, доступностью и тем, где хранятся данные. Если в админке оказываются заявки клиентов, закон 152-ФЗ требует хранить базы с данными россиян на серверах в России.

Открытые системы на своём сервере. Например, Strapi, Directus или Payload. Их ставят на ваш сервер, данные остаются у вас, подписки за саму систему обычно нет. У каждой своя лицензия и свои ограничения, поэтому условия проверяют до выбора. Под проект их дорабатывают: добавляют нужные поля, роли, интеграции.

Своя админка, написанная под проект. Её делают вместе с сайтом, и в ней ровно те поля и разделы, которые нужны вашему бизнесу. Ничего лишнего, понятная структура для менеджера. Такой вариант часто выбирают для сложных сайтов, где готовая система всё равно потребовала бы серьёзных доработок.

Выбор зависит от того, что важнее: скорость запуска, контроль над данными или точное попадание в процессы компании.

При выборе полезно задать подрядчику несколько вопросов. Где будет лежать админка и кто за неё платит? Можно ли выгрузить весь контент, если вы решите сменить подрядчика? Будет ли предпросмотр страниц до публикации? Как добавляются новые секции и сколько времени это обычно занимает? По ответам сразу видно, продумана ли схема или headless предлагают ради модного слова.

Многие слышали, что на сайте с чистым кодом без программиста ничего не поменять. Раньше так часто и было. Headless-подход решает эту проблему: сайт написан с нуля, а контентом управляют через нормальную админку.

Хороший пример — сайт Villagio Estate, лидера загородной недвижимости на Новой Риге. На сайте 7 посёлков и каталог объектов с фильтрами. Новые страницы менеджеры собирают сами в конструкторе из 28 готовых секций, как из кубиков. Для команды настроены роли и журнал действий: видно, кто и что поменял.

Так и выглядит хорошая админка для headless-сайта. Менеджер не пишет код и не ломает вёрстку. Он выбирает секцию «Преимущества» или «Галерея», заполняет поля и публикует. Дизайн при этом остаётся целым, потому что каждая секция заранее свёрстана и проверена.

Технически такие проекты обычно собирают как сайт на чистом коде: витрина на React и Next.js, отдельно админка, между ними API. Если хотите глубже понять, чем самописный сайт отличается от сайта на движке, почитайте нашу статью про самописный сайт.

Переезд со старого движка обычно самая рискованная часть. Можно сделать красивый быстрый сайт и потерять половину трафика из поиска, если забыть про старые адреса. Поэтому работа идёт по порядку.

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

Headless CMS — это админка, которая хранит контент и отдаёт его по API, а сайт делают отдельно. Такая схема даёт скорость, свободу дизайна и один источник данных для сайта, приложения и кабинетов.

Платить за это приходится сложностью: нужен разработчик, нет визуального редактора из коробки, многое собирают под проект. Поэтому headless хороша для сложных и растущих сайтов и почти всегда лишняя для визитки или простого лендинга.