Headless CMS — что это и чем отличается от обычной

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

#Что такое headless CMS простыми словами

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

Headless CMS оставляет только «тело». Контент в ней хранится как данные: заголовок, цена, картинка, список преимуществ. Сайт делает разработчик — на React, Next.js, Vue или любом другом стеке — и забирает эти данные по API. Одни и те же данные может получать и сайт, и мобильное приложение, и экран в магазине.

Если хочется сначала разобраться, что такое CMS вообще, — начните со статьи «Что такое CMS простыми словами».

#Как это работает

1. Разработчик описывает, из чего состоит контент: например, у главной страницы есть заголовок, цена, картинка и список.
2. Редактор заполняет эти поля в админке headless CMS.
3. Сайт запрашивает данные по API и получает JSON.
4. Код сайта вставляет данные в свою вёрстку и показывает посетителю.

Ответ API выглядит примерно так:

GET /api/pages/home?lang=ru

{
  "title": "Ремонт ноутбуков за один день",
  "price": 1490,
  "image": "https://cdn.example.com/hero.jpg",
  "features": ["Гарантия 6 месяцев", "Бесплатная диагностика"]
}

А так его использует сайт:

// Next.js, React, Vue, Astro — неважно: это обычный запрос
const res = await fetch('https://cms.example.com/api/pages/home?lang=ru');
const page = await res.json();

// дальше разработчик сам решает, как это показать
<h1>{page.title}</h1>
<p>от {page.price} ₽</p>

Когда редактор меняет цену в CMS, сайт при следующем запросе получает новую. Если страницы собираются заранее (статическая генерация), их пересобирают — по расписанию, по кнопке или по сигналу от CMS.

#REST или GraphQL

Данные отдаются двумя основными способами. REST — у каждого вида контента свой адрес: страницы, статьи, товары. Это просто и работает с любым языком. GraphQL — один адрес, а в запросе перечисляют нужные поля, и сервер отдаёт ровно их. Удобно для сложных связей между данными, но требует чуть больше настройки. Многие системы поддерживают оба способа.

#Чем headless CMS отличается от обычной

#Плюсы и минусы

#Плюсы

• Любой стек. Разработчик пишет сайт на том, что знает и что подходит задаче, а не на языке CMS.
• Скорость. Страницы можно собирать заранее и раздавать как статические файлы — это быстро и дёшево.
• Один контент — много мест. Сайт, приложение и чат-бот берут одни и те же данные.
• Безопасность. Админка не стоит на том же сервере, что и сайт, и у сайта нет плагинов, которые нужно постоянно обновлять.
• Переезд без потери контента. Сменить дизайн или фреймворк можно, не трогая контент.

#Минусы

• Без разработчика не обойтись. Нет готовых тем: сайт нужно написать.
• Редактор не видит страницу. Во многих системах он заполняет поля формы и не знает, как текст ляжет на страницу, пока не откроет сайт. Поэтому у крупных систем появляются визуальные редакторы и предпросмотр.
• Больше частей. CMS, хостинг сайта, сборка, иногда отдельный сервис для картинок — всё это нужно связать.
• То, что в WordPress есть плагином, здесь пишут сами: формы, поиск, комментарии.

#Какие бывают headless CMS

• Облачные сервисы — Contentful, Storyblok, Sanity, Hygraph. Сервер, обновления и резервные копии — на стороне сервиса, платите подпиской. У Storyblok и Sanity есть визуальная правка.
• Open-source на своём сервере — Strapi, Directus, Payload. Ставите сами, данные у вас, но обновления и резервные копии — тоже ваша забота.
• Git-based — Decap CMS, TinaCMS. Контент хранится файлами в репозитории рядом с кодом. Подходит для документации и небольших сайтов на генераторах статики.
• Headless WordPress — привычная админка WordPress, а сайт отдельно на React или Next.js. Данные — через встроенный REST API или плагин WPGraphQL.

#Когда headless CMS нужна, а когда нет

Подходит, если:

• сайт пишет разработчик на React, Next.js, Vue, Nuxt или Astro;
• сайт уже работает, а тексты в нём правит программист — и это надо прекратить;
• один контент нужен на сайте и в приложении;
• важна скорость загрузки и вы готовы собирать страницы заранее.

Не нужна, если:

• разработчика нет — проще взять конструктор или WordPress с готовой темой;
• это простой сайт-визитка, который почти не меняется;
• нужен интернет-магазин «под ключ» — для этого есть платформы магазинов.

#Главная проблема headless: как редактору видеть страницу

Разработчику headless удобна: данные приходят чистым JSON. А редактору — не всегда. Он видит поля «Заголовок», «Подзаголовок», «Текст кнопки» и не знает, поместится ли новый заголовок в одну строку и как будет выглядеть страница на телефоне. Ошибки замечают уже на живом сайте.

Решают это по-разному: предпросмотром в отдельной вкладке, визуальным редактором внутри CMS, который показывает страницу в рамке, или правкой прямо на живом сайте. Перед выбором системы попросите редактора — не разработчика — поправить в демо пару текстов и посмотрите, насколько ему удобно.

#Headless CMS с правкой на странице: Sitecog

Sitecog — headless CMS, в которой контент правят прямо на сайте. Разработчик забирает данные обычным REST-запросом и один раз размечает элементы атрибутом. После этого редактор открывает свой сайт, нажимает на заголовок или картинку и меняет их на месте — а сохраняется это в те же данные, что отдаёт API.

const res = await fetch('https://back.sitecog.com/content/v1/sections/hero?lang=ru', {
  headers: { 'x-crm-key': 'pk_…' },
});
const hero = (await res.json()).content;

// разметка data-crm-text включает правку этого заголовка прямо на странице
<h1 data-crm-text="hero_title">{hero.hero_title.content.ru}</h1>

• REST и JSON, без SDK: обычный fetch из браузера, с сервера или при сборке;
• ключ доступа только на чтение, кэш сбрасывается сразу после правки;
• до 20 языков с автопереводом — ручные правки не перезаписываются;
• тексты, HTML, числа, картинки, видео, ссылки, даты, списки и вложенные объекты;
• на том же скрипте — онлайн-чат и заявки с форм.

#С чего начать

1. Выпишите, какой контент на сайте меняется: тексты, цены, картинки, статьи.
2. Решите, кто его правит и насколько ему важно видеть страницу.
3. Попробуйте две-три системы на одной странице сайта — с настоящим редактором.
4. Переведите на CMS сначала самые часто меняющиеся блоки, остальное — постепенно.

Частые вопросы