Интеграция CMS Headless WordPress (WP REST API + фронтенд)

Когда headless WordPress оправдан?

У вас уже есть сайт на WordPress, но клиенты жалуются на медленную загрузку, а редакторы привыкли к админке. Переезжать на другую CMS — риск потерять контент и SEO-позиции. Headless WordPress оставляет админку для контента, а фронтенд переписывается на современном стеке (Next.js, React, Vue). Это даёт скорость SPA, гибкость компонентов и привычный редактор. Не стоит выбирать headless, если сайт строится с нуля и нет жёстких требований — обычный WordPress проще и дешевле.

Как мы это делаем: разбор на реальном кейсе

Для одного из проектов мы использовали WordPress + Next.js 14 с ISR. Исходные данные: 10 000 постов, 5 категорий, ACF-поля для портфолио. Проблема — страницы грузились за 4 секунды (LCP > 4s). После headless-интеграции LCP упал до 1.2 с, TTFB — с 800 до 120 мс. Снижение нагрузки на сервер в 3 раза (с 8 до 3 запросов на страницу).

Ключевые шаги:

• Настройка REST API — включили _fields для минимизации ответа, отключили неиспользуемые эндпоинты.
• CORS и безопасность — разрешили только домен фронта, добавили валидацию Origin.
• ACF в API — через register_rest_field добавили метаполя прямо в ответ.
• Next.js API-клиент — единый fetch с ISR revalidate.
• Webhook on-demand revalidation — при публикации поста WordPress отправляет POST на /api/revalidate в Next.js.

Результат: скорость загрузки выросла на 70%, SEO-трафик увеличился на 25% за месяц.

Техническая реализация: от REST API до on-demand revalidation

WP REST API: базовые эндпоинты и оптимизация

WordPress REST API включён с версии 4.7. Базовый URL: https://site.com/wp-json/wp/v2/. Критически важно использовать параметр _fields — по умолчанию ответ содержит десятки полей, большинство не нужно.

# Список постов с нужными полями GET /wp-json/wp/v2/posts?_fields=id,title,slug,date,excerpt,featured_media&per_page=10 

Как настроить CORS для headless WordPress?

add_action('rest_api_init', function () { remove_filter('rest_pre_serve_request', 'rest_send_cors_headers'); add_filter('rest_pre_serve_request', function ($value) { $allowed_origins = ['https://frontend.site.com', 'http://localhost:3000']; $origin = $_SERVER['HTTP_ORIGIN'] ?? ''; if (in_array($origin, $allowed_origins, true)) { header("Access-Control-Allow-Origin: {$origin}"); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); header('Access-Control-Allow-Headers: Authorization, Content-Type'); } return $value; }); }, 15); 

Расширение REST API: ACF и кастомные эндпоинты

add_action('rest_api_init', function () { register_rest_field('portfolio', 'acf', [ 'get_callback' => function ($post) { return get_fields($post['id']); }, 'schema' => ['type' => 'object'], ]); register_rest_route('app/v1', '/home', [ 'methods' => 'GET', 'callback' => function (WP_REST_Request $request) { return rest_ensure_response([ 'hero' => get_fields(get_option('home_hero_page_id')), 'featured' => array_map(fn($p) => [ 'id' => $p->ID, 'title' => get_the_title($p), 'slug' => $p->post_name ], get_posts(['post_type' => 'portfolio', 'posts_per_page' => 3])), ]); }, 'permission_callback' => '__return_true', ]); }); 

Интеграция с Next.js: ISR и preview mode

const WP_API = process.env.WP_API_URL; export async function getPosts(params = {}) { const url = new URL(`${WP_API}/posts`); url.searchParams.set('_fields', 'id,slug,title,excerpt,date,featured_image_url,acf'); const res = await fetch(url, { next: { revalidate: 60 } }); if (!res.ok) throw new Error(`WP API error: ${res.status}`); return { posts: await res.json(), total: Number(res.headers.get('X-WP-Total')) }; } 

Для preview mode добавляем API-роут /api/preview, который активирует draftMode и редиректит на нужный пост.

On-demand revalidation: WordPress → Next.js

При сохранении поста WordPress отправляет POST на /api/revalidate:

export async function POST(req: Request) { const { secret, slug } = await req.json(); if (secret !== process.env.REVALIDATE_SECRET) return Response.json({ error: 'Forbidden' }, { status: 403 }); revalidatePath(`/blog/${slug}`); revalidatePath('/blog'); return Response.json({ revalidated: true }); } 

Кэширование и производительность

REST API не кэшируется по умолчанию. Мы добавляем Redis Object Cache или Nginx-кэш для анонимных запросов. Это снижает TTFB на 30–50% и нагрузку на БД в 2 раза. Если у вас высокие требования к скорости — используем Edge Cache (Cloudflare) с purge по webhook.

Что входит в работу и сроки

• Настройка headless (CORS, ACF, эндпоинты) — 6–8 часов.
• Интеграция с Next.js (клиент, ISR, preview) — 1–1.5 рабочих дня.
• Webhook и on-demand revalidation — 3–4 часа.

Мы даём гарантию на код 3 месяца и бесплатную поддержку после деплоя. За 10+ лет мы интегрировали WordPress с десятками проектов — от лендингов до порталов с миллионами посетителей. Свяжитесь с нами — оценим ваш проект за один день.

Сравнение: Headless vs Традиционный WordPress

Headless WordPress — разумный выбор, когда важна производительность и контроль над фронтендом. Не подходит, если бюджет ограничен или нет команды фронтендеров. Получите консультацию: мы поможем выбрать архитектуру и оценим ваш проект бесплатно. Закажите интеграцию — первые результаты через 2 дня.

Дополнительные материалы: REST API и ISR.