Headless-сайти на Strapi CMS: розробка під ключ

Зауважимо: коли фронтенд-команда хоче керувати контентом без прив'язки до монолітного бекенду, Strapi — одне з перших рішень. Але типова помилка — неправильно спроектувати content types під API, що призводить до N+1 запитів та падіння TTFB. На одному проекті ми побачили, як Strapi з неоптимізованим викликом populate генерував 300+ запитів до БД на одну сторінку, а Time to First Byte виріс до 2 секунд. Після налаштування правильної схеми та кешування Redis вдалося вкластися в 50 мс. Такі проблеми обходяться дорого: згідно з практикою, виправлення архітектури на ранньому етапі економить до 40% бюджету. Наша компанія надає аутсорс розробки на Strapi, інтеграцію з Next.js та створення кастомних content types. Зв'яжіться з нами для оцінки вашого проекту — ми запропонуємо оптимальне рішення.

Чому Strapi для headless-архітектури?

Strapi — Node.js headless CMS з автоматичною генерацією REST та GraphQL API з конфігурації content-type. Content types описуються через JSON-схему (в src/api/*/content-types/*.json), зміни схеми через GUI зберігаються в коді. Це означає, що розробники контролюють версійність, а редактори спокійно наповнюють контент. У коробці — система драфтів/публікації, локалізація, плагіни та гнучка модель прав. Для медіа використовуємо Cloudinary або S3, що розвантажує сервер. Гарантуємо стабільну роботу навіть при високих навантаженнях — налаштовуємо Redis для кешування запитів. У порівнянні з WordPress як headless, Strapi в 2 рази швидший за часом розгортання, а вартість ліцензій відсутня (відкритий вихідний код).

Як інтегрувати Strapi з Next.js?

Інтеграція будується на HTTP-викликах. Ми підключаємо Strapi як окремий сервіс, генеруємо API-токени для публічного доступу та використовуємо fetch у серверних компонентах Next.js. Для інкрементальної статичної регенерації (ISR) налаштовуємо вебхуки: Strapi повідомляє Next.js при зміні запису, і та інвалідує кеш. Це дає свіжий контент без перезбирання всього сайту. Докладніше про формат відповіді Strapi — в офіційній документації. Типовий стек:

Які підводні камені при розробці на Strapi?

N+1 queries — одна з найчастіших проблем. За замовчуванням Strapi не розкриває зв'язки, тому без явного ?populate=* ви отримуєте тільки ID. Але навіть з populate може виникнути ланцюгове завантаження. Рішення: використовувати вкладений populate для конкретних полів і включати кешування на рівні Redis. Інша складність — формат відповіді. У Strapi 4 дані обгорнуті в { data: { id, attributes } }, у 5-й версії — плоско. При міграції потрібно враховувати це на фронті. Також варто пам'ятати про права доступу: неправильне налаштування ролей може відкрити неавторизований доступ до API.

Що входить в роботу

1. Аналіз — розбір вимог до контент-моделі, прав та інтеграцій.
2. Проектування — створення content types, налаштування медіа-сховища, підготовка схеми.
3. Розробка — написання кастомних контролерів, плагінів, життєвих циклів.
4. Інтеграція — підключення до фронтенду (Next.js, Nuxt, Vue), налаштування ISR.
5. Тестування — навантажувальні тести, перевірка прав, міграція даних.
6. Деплой — розгортання на ваш хостинг або хмару, налаштування CI/CD.
7. Документація — опис API, інструкція для редакторів, чек-лист по запуску.

Терміни та як ми працюємо

Базовий сайт з 4–6 content types та інтеграцією з Next.js — 2–3 тижні. Складний проект з кастомними контролерами, багатомовністю та плагінами — 4–6 тижнів. Вартість розраховується індивідуально після брифу. Досвід впровадження Strapi та 30+ успішних проектів дозволяють нам точно оцінити обсяг. Отримайте консультацію безкоштовно — ми проконсультуємо по архітектурі та запропонуємо оптимальне рішення.

Встановлення та налаштування

# Quickstart з SQLite або PostgreSQL npx create-strapi-app@latest my-project --quickstart # Або з PostgreSQL: npx create-strapi-app@latest my-project \ --dbclient=postgres \ --dbhost=localhost \ --dbport=5432 \ --dbname=strapi_db \ --dbusername=strapi \ --dbpassword=pass cd my-project && npm run develop 

Content Types: проектуємо структуру

Content types створюються через Content-Type Builder в адмінці або вручну через JSON. Приклад схеми для статті:

{ "kind": "collectionType", "collectionName": "articles", "info": { "singularName": "article", "pluralName": "articles", "displayName": "Стаття" }, "attributes": { "title": { "type": "string", "required": true }, "slug": { "type": "uid", "targetField": "title" }, "content": { "type": "richtext" }, "excerpt": { "type": "text", "maxLength": 500 }, "publishedAt": { "type": "datetime" }, "cover": { "type": "media", "multiple": false, "required": false, "allowedTypes": ["images"] }, "category": { "type": "relation", "relation": "manyToOne", "target": "api::category.category" }, "tags": { "type": "relation", "relation": "manyToMany", "target": "api::tag.tag" }, "author": { "type": "relation", "relation": "manyToOne", "target": "plugin::users-permissions.user" } } } 

REST API з коробки

# Отримати список статей з populate GET http://localhost:1337/api/articles?populate=cover,category,author # Фільтрація, сортування, пагінація GET /api/articles?filters[category][slug][$eq]=tech&sort=publishedAt:desc&pagination[pageSize]=10 # Пошук за заголовком GET /api/articles?filters[title][$containsi]=javascript 

Підключення до Next.js та вебхуки для ISR

// lib/strapi.ts const STRAPI_URL = process.env.STRAPI_URL || 'http://localhost:1337' const API_TOKEN = process.env.STRAPI_API_TOKEN export async function fetchStrapi<T>( endpoint: string, options?: RequestInit ): Promise<T> { const response = await fetch(`${STRAPI_URL}/api${endpoint}`, { headers: { Authorization: `Bearer ${API_TOKEN}`, 'Content-Type': 'application/json', }, next: { tags: [endpoint.split('/')[1]] }, ...options, }) if (!response.ok) { throw new Error(`Strapi API error: ${response.status}`) } const data = await response.json() return data } 

Для ISR додаємо вебхук в Strapi: Settings → Webhooks → URL ендпоінта Next.js. При зміні запису Strapi шле POST з моделлю, а Next.js перегенерує кеш. Зверніть увагу на керівництво з revalidation в Next.js для тонкого налаштування.

// app/api/revalidate/strapi/route.ts import { revalidateTag } from 'next/cache' import { NextRequest, NextResponse } from 'next/server' export async function POST(req: NextRequest) { const body = await req.json() const { model } = body revalidateTag(model) return NextResponse.json({ revalidated: true }) } 

Особливості, які варто врахувати

• Формат відповіді: у Strapi 4 дані обгорнуті в { data: { id, attributes } }, у 5-й версії — плоско.
• Populate: за замовчуванням зв'язки не розкриваються, тому завжди вказуйте ?populate=* або конкретні поля.
• Чернетки: використовуйте ?publicationState=live для опублікованих та ?publicationState=preview з токеном для чернеток.

Порівняння версій Strapi: