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: