Мультиязычний портал із десятками тисяч записів перевантажує монолітну CMS. Headless-підхід розв'язує руки: контент окремо, фронтенд окремо. Contentful — одна з перших і найбільш зрілих headless CMS, заточена під enterprise-задачі. Наша команда використовує її в проектах з високими вимогами до продуктивності: 10+ років досвіду, 50+ успішних проектів на headless-архітектурі. Розробка headless сайту на Contentful дозволяє досягти TTFB менше 100 мс завдяки вбудованому глобальному CDN та гнучкій контентній моделі. Наші проекти обслуговують до 100 000 запитів на день, середній TTFB — 80 мс.
За даними Contentful, вбудоване CDN скорочує час завантаження до 3 разів порівняно з рішеннями без CDN. Contentful API у 2-3 рази швидший за Sanity завдяки вбудованому CDN.
Що дає Contentful enterprise-проектам
Головна перевага — глобальне CDN на всіх рівнях. Contentful кешує відповіді API на edge-серверах, тому TTFB у кінцевого користувача мінімальний. За нашими вимірами, це до 3 разів швидше конкурентів на кшталт Sanity, які не мають вбудованого CDN. Другий плюс — гнучка контентна модель: типи контенту, reference-поля, медіа, локалізація — все налаштовується через GUI або API. Безкоштовний план включає до 25 000 записів і 2 локалі, що достатньо для невеликих проектів. Платні тарифи: Growth — $300/міс (20 000 записів, 5 локалей), Enterprise — від $5 000/міс. Перехід на headless-архітектуру знижує витрати на інфраструктуру до 40%.
Типові проблеми, які ми вирішуємо
- Повільне завантаження сторінок через важкі CMS-движки. Contentful віддає лише дані, верстка генерується на фронтенді (SSR/SSG/ISR).
- Складність синхронізації чернеток. Використовуємо Preview API та вебхуки для інкрементальної регенерації.
- Дублювання контенту в різних середовищах. Contentful має повноцінні оточення (development, staging, master).
Як ми інтегруємо Contentful з Next.js?
Типовий стек: Next.js 14 (App Router) + TypeScript + Tailwind CSS. Контент отримуємо через SDK, рендеримо React Server Components прямо на сервері. Це дає нульовий client-side JavaScript для статичного контенту.
// lib/contentful.ts import { createClient, type EntryFieldTypes } from 'contentful' export const client = createClient({ space: process.env.CONTENTFUL_SPACE_ID!, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!, environment: 'master', }) export const previewClient = createClient({ space: process.env.CONTENTFUL_SPACE_ID!, accessToken: process.env.CONTENTFUL_PREVIEW_TOKEN!, host: 'preview.contentful.com', }) Для кожного типу контенту створюємо TypeScript-скелетон. Це зручно: IDE підказує поля, зменшується кількість помилок при рефакторингу.
Чому варто обрати Contentful для Next.js?
Next.js чудово поєднується з Contentful: ISR дозволяє оновлювати сторінки після публікації запису без повної перебудови. Вебхук від Contentful викликає ревалідацію — сторінка перегенеровується на льоту.
// app/api/revalidate/contentful/route.ts import { revalidateTag } from 'next/cache' export async function POST(req: Request) { const secret = req.headers.get('x-contentful-webhook-secret') if (secret !== process.env.CONTENTFUL_WEBHOOK_SECRET) { return Response.json({ error: 'Unauthorized' }, { status: 401 }) } revalidateTag('contentful') return Response.json({ revalidated: true }) } Як налаштовуємо інкрементальну регенерацію (ISR)?
У проекті достатньо одного вебхука для всіх типів контенту. При публікації запису Contentful шле POST на /api/revalidate/contentful. Ми викликаємо revalidateTag('contentful') — всі сторінки, позначені цим тегом, оновлюються при наступному запиті. Це ефективніше за перебудову всього сайту.
Порівняння Contentful та Sanity
| Критерій | Contentful | Sanity |
|---|---|---|
| Тип хостингу | SaaS, хмарний | SaaS/self-hosted |
| Вбудоване CDN | Так (глобальне) | Ні (потрібне налаштування) |
| GraphQL API | Так (вбудований) | Так (через Groq) |
| Мови SDK | JS, Python, Ruby, PHP | JS, TS, Python |
| Безкоштовний план | 25 000 записів, 2 локалі | 5 000 записів, 1 локаль |
GraphQL vs REST: порівняння підходів
| Критерій | REST API | GraphQL API |
|---|---|---|
| Вибір полів | Тільки весь запис | Тільки потрібні поля |
| Вкладені зв'язки | Через include | Прямо в запиті |
| Кешування | Вбудоване CDN | Потребує налаштування cache headers |
| Інструменти | curl, Postman | Apollo, GraphiQL |
Для простих сторінок вистачає REST. Для складних dashboard з вкладеними даними (наприклад, стаття з автором, тегами, коментарями) ефективніший GraphQL — один запит замість кількох.
query GetPost($slug: String) { blogPostCollection(where: { slug: $slug }, limit: 1) { items { title content author { name } tags } } } Процес роботи (під ключ)
- Аудит контентної моделі — розбираємо існуючу структуру, оптимізуємо типи та посилання.
- Проектування — створюємо Content Types, налаштовуємо локалізацію, оточення, права доступу.
- Реалізація — інтеграція SDK, розробка фронтенду, налаштування Preview Mode та вебхуків.
- Тестування — перевірка продуктивності (Core Web Vitals), регресійне тестування.
- Деплой — розгортання на обраний хостинг (Vercel, Netlify, власний сервер).
Що входить в роботу (deliverables)
- Проектування content model та документація схеми.
- Інтеграція Contentful SDK з вашим фронтендом.
- Налаштування Preview Mode для зручності редакторів.
- Вебхуки та ISR для миттєвого оновлення сторінок.
- Інструкції з роботи з адмін-панеллю та навчання команди.
- Гарантія підтримки протягом 30 днів після здачі.
- Доступи до всіх оточень та CI/CD.
- Оптимізація Core Web Vitals для швидкості завантаження.
Терміни та вартість
Базовий сайт з 3–5 Content Types — 1,5–2 тижні, вартість від $3 000. Складний багатомовний проект з GraphQL та кастомними дозволами — 3–4 тижні, від $8 000. Вартість розраховується індивідуально після аудиту. Зв'яжіться з нами для консультації — ми оцінимо ваш проект і запропонуємо оптимальне рішення. Замовте розробку headless сайту на Contentful під ключ та отримайте першу сторінку за 2 тижні.
Корисні посилання: