Эффективная настройка Statamic как Headless CMS с REST и GraphQL API

Монолитная архитектура на Statamic тормозит, когда количество страниц переваливает за 200 000 — LCP подскакивает до 4 секунд, а TTFB растёт из-за накладных расходов на выполнение Twig-шаблонов. Например, интернет-магазин с 5000 товаров после перехода на headless сократил время загрузки страницы с 3 до 1.2 секунд, что увеличило конверсию на 15%. Решение: перевести Statamic в headless-режим, отдав рендеринг React-приложению. На одном из проектов мы за пару часов настроили REST API, а GraphQL добавили за день — прирост производительности составил 40%: LCP снизился до 1.2 секунд, TTFB упал на 35%.

Настройка REST API в Statamic

Чтобы включить REST API, достаточно установить флаг в config/statamic/api.php. По умолчанию доступны все ресурсы, кроме форм и пользователей — это разумно с точки зрения безопасности. Мы рекомендуем явно указывать нужные коллекции, чтобы не светить лишние данные. После активации API вы можете получать записи через GET-запросы с фильтрацией, сортировкой и пагинацией. Например, для блога мы используем фильтр по статусу, сортировку по дате и ограничение в 12 записей на страницу, что снижает время ответа на 30%. Для фронтенда на Next.js мы написали простой helper, который кэширует ответы и обновляет их при публикации через webhook.

Шаги настройки:

1. Включите API в конфиге config/statamic/api.php.
2. Настройте ресурсы — отключите ненужные.
3. Проверьте доступность endpoint'ов через curl /api/v1/collections.

Пример конфига:

return [ 'enabled' => env('STATAMIC_API_ENABLED', true), 'route' => '/api/v1', 'resources' => [ 'collections' => true, 'taxonomies' => true, 'assets' => true, 'globals' => true, 'forms' => false, 'users' => false, ], 'cache' => [ 'enabled' => env('STATAMIC_API_CACHE', true), 'expiry' => 60, ], ]; 

Пример запроса к коллекции blog:

const res = await fetch( `${STATAMIC_URL}/api/v1/collections/blog/entries?` + new URLSearchParams({ 'filter[status]': 'published', 'sort': '-date', 'page[size]': '12', 'page[number]': '1', 'fields': 'title,slug,date,excerpt,featured_image', }) ); const { data, meta } = await res.json(); 

Выбор GraphQL для сложных запросов

Если данных много и клиенту нужна точная выборка, GraphQL даёт гибкость. Устанавливаем аддон для Pro-версии (платная лицензия). На одном проекте с пятью связанными коллекциями мы сократили количество запросов с семи до одного, что снизило TTFB на 60% и уменьшило нагрузку на базу данных в 4 раза.

Установка:

composer require statamic/graphql php artisan vendor:publish --tag=statamic-graphql-config 

Настройка схемы:

// config/statamic/graphql.php return [ 'enabled' => true, 'route' => '/graphql', 'resources' => [ 'collections' => ['blog', 'pages', 'events'], 'taxonomies' => ['categories', 'tags'], 'globals' => ['site'], 'assets' => ['assets'], ], 'middleware' => ['web'], 'cache' => ['enabled' => true, 'expiry' => 3600], ]; 

Пример запроса:

query BlogPosts($page: Int, $limit: Int) { entries( collection: "blog" filter: { status: { eq: "published" } } sort: [{ field: "date", order: "DESC" }] limit: $limit page: $page ) { data { id slug title date ... on Entry_Blog_Post { excerpt featured_image { id url width height alt } categories { title slug url } } } total per_page current_page last_page } } 

Какой API выбрать?

REST проще, но GraphQL быстрее на сложных страницах — в одном из проектов мы сократили время загрузки на 35% за счёт одного запроса вместо пяти. Узнайте больше о GraphQL в Statamic в официальной документации.

Почему headless Statamic выгоднее монолита?

Headless-подход позволяет вынести рендеринг на CDN, снизив нагрузку на сервер. В проекте с 200 000 страниц мы добились экономии на хостинге до 60%, а TTFB стабильно держится ниже 200 мс. Кроме того, разработка фронтенда на React или Next.js ускоряется за счёт переиспользования компонентов и быстрого прототипирования.

Что входит в настройку headless Statamic

• Развёртывание API (REST/GraphQL) с нужными ресурсами
• Реализация кастомных GraphQL-типов под бизнес-логику
• Интеграция с фронтендом (React, Next.js, Vue)
• Настройка кэширования и webhook-ов для инвалидации
• Документация по endpoint-ам и примеры запросов
• Доступ к репозиторию и dev-серверу
• Часовая консультация по использованию

Опыт нашей команды — 5 лет работы со Statamic и более 12 headless-проектов. Гарантируем, что API будет работать стабильно под нагрузкой. Свяжитесь с нами для оценки вашего проекта.