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=uk

{
  "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=uk');
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=uk', {
  headers: { 'x-crm-key': 'pk_…' },
});
const hero = (await res.json()).content;

// розмітка data-crm-text вмикає редагування цього заголовка просто на сторінці
<h1 data-crm-text="hero_title">{hero.hero_title.content.uk}</h1>

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

#З чого почати

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

Часті питання