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: