Інтеграція Headless WordPress: WP REST API + Frontend

Коли 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.