Рендеринг в Next.js: SSG, SSR и ISR

Архитектурная база#

В архитектуре Headless WordPress на базе Next.js 16 (App Router) стратегия рендеринга и управления кэшем определяет баланс между производительностью пользовательского опыта (Time to First Byte, TTFB), нагрузкой на базу данных CMS и актуальностью отображаемого контента.

Исторический подход Pages Router (разделение на getStaticProps, getServerSideProps и жесткий интервал revalidate: N) в современном стеке 2026 года заменен на четырехуровневую систему кэширования Next.js:

1. Request Memoization: дедупликация идентичных запросов fetch внутри одного цикла рендеринга серверных компонентов (RSC) через React Cache.
2. Data Cache: персистентный серверный кэш данных между запросами, управляемый тегами кэша (next: { tags: ['posts', 'post:42'] }) или новой директивой "use cache" с функцией cacheTag().
3. Full Route Cache: автоматическое сохранение сгенерированного HTML и полезной нагрузки Server Components (RSC Payload) на сервере и Edge CDN.
4. Router Cache: клиентский кэш навигации в памяти браузера, сохраняющий посещенные сегменты маршрута на время сессии.

Сравнение базовых стратегий:

• SSG (Static Site Generation): полная предкомпиляция страниц на этапе next build. Обеспечивает минимальный TTFB (менее 30 мс) с Edge CDN, но при наличии 100 000 постов сборка проекта занимает часы, а любые изменения в CMS требуют полного перезапуска CI/CD.
• SSR (Server-Side Rendering): динамическая генерация HTML на каждый входящий запрос (cache: 'no-store'). Гарантирует 100% свежесть данных, но создает прямую линейную нагрузку на PHP-воркеры WordPress и СУБД MySQL, приводя к задержкам ответа 300–1200 мс.
• Time-based ISR (Incremental Static Regeneration): кэширование с интервалом обновления (revalidate: 60). Имеет фундаментальный изъян: контент отстает от реального состояния в CMS на заданное количество секунд, а при истечении таймера под высокой нагрузкой возникает риск каскадных повторных вычислений.

Инженерный стандарт 2026 года — On-Demand Tagged Invalidation (ISR по требованию): Страницы кэшируются на Edge CDN бессрочно. В момент публикации, обновления или удаления статьи в админке WordPress ядро через хуки transition_post_status и post_updated отправляет криптографически подписанный вебхук (HMAC-SHA256) в Next.js Route Handler (/api/revalidate). Обработчик верифицирует подпись и вызывает атомарную инвалидацию конкретного тега: revalidateTag('post:42'). Нужная страница мгновенно сбрасывается из кэша CDN и пересобирается в фоновом режиме по паттерну Stale-While-Revalidate, в то время как остальные 99 999 страниц остаются нетронутыми.

Для масштабирования каталогов с миллионами записей применяется гибридная модель: функция generateStaticParams() предкомпилирует только топ-100 самых посещаемых статей на этапе сборки, а флаг export const dynamicParams = true обеспечивает ленивую генерацию и кэширование всех остальных страниц при первом визите пользователя.

Ментальная модель#

Архитектура мгновенной инвалидации кэша (On-Demand ISR) между CMS и Edge CDN:

+-----------------------------------------------------------------------------------------+
|                              АДМИНИСТРАТИВНЫЙ БЭКЕНД WORDPRESS                          |
+-----------------------------------------------------------------------------------------+
| [Редактор нажимает "Опубликовать"]                                                      |
|         |                                                                               |
|         v                                                                               |
| [Хук: transition_post_status / post_updated]                                            |
|         |                                                                               |
|         v                                                                               |
| [HMAC-SHA256 Webhook Dispatcher] ---> Отправка POST /api/revalidate                     |
|                                       (Payload: { tag: "post:42", ts: 1774600000 })     |
|                                       (Header: X-Agentic-Signature: e3b0c44...)         |
+-----------------------------------------------------------------------------------------+
                                         |
                                         | Безопасный HTTP запрос
                                         v
+-----------------------------------------------------------------------------------------+
|                            NEXT.JS 16 EDGE ROUTE HANDLER                               |
+-----------------------------------------------------------------------------------------+
| [/api/revalidate/route.ts]                                                             |
|         |                                                                               |
|         +---> [Timing-Safe HMAC Verification: crypto.timingSafeEqual()]                 |
|         |        | (Защита от атак по времени и неавторизованного сброса)               |
|         |        v                                                                      |
|         +---> [revalidateTag("post:42")]                                                |
|                  |                                                                      |
|                  v                                                                      |
|         [Edge Data Cache / Full Route Cache: Tag Purged!]                              |
+-----------------------------------------------------------------------------------------+
                                         |
                                         v
+-----------------------------------------------------------------------------------------+
|                                    ПУБЛИЧНЫЕ ПОЛЬЗОВАТЕЛИ                               |
+-----------------------------------------------------------------------------------------+
| Пользователь А (Запрос через 10 мс): Получает Stale Cache (30 мс)                       |
|          |---> Next.js в фоне выполняет 1 запрос к WP API и обновляет кэш               |
| Пользователь Б (Запрос через 500 мс): Получает СВЕЖИЙ обновленный HTML!                 |
+-----------------------------------------------------------------------------------------+

На практике применяется#

1. Многомиллионные каталоги недвижимости и авто: Компиляция только главных страниц разделов при сборке (generateStaticParams), в то время как карточки 500 000 объектов генерируются по требованию при первом переходе из поиска.
2. Новостные порталы с высокой частотой публикаций: Настройка тегированного кэша: тег posts инвалидирует ленту новостей на главной, а тег post:${id} обновляет только конкретную статью, сохраняя 99.9% кэша нетронутым.
3. Интернет-магазины на Headless WooCommerce: Мгновенный сброс кэша остатков товара через тег product:stock:${sku} при получении вебхука от складской системы 1C/МойСклад.
4. Синхронизация глобальной навигации и меню: Инвалидация тега wp:menus при изменении ссылок в админке, обновляющая шапку и подвал на всем сайте без пересборки страниц.

Как это работает#

Масштабирование: Архитектура generateStaticParams + dynamicParams#

Если в интернет-магазине или блоге содержится 100 000 постов, попытка сгенерировать все страницы в generateStaticParams() приведет к исчерпанию оперативной памяти и падению сборщика Next.js по таймауту.

Стандарт 2026 года:

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // Разрешаем генерацию неизвестных слагов на лету

export async function generateStaticParams() {
  // Выбираем только 100 самых популярных / свежих постов
  const topPosts = await wpClient.getTopPosts({ limit: 100 });
  return topPosts.map((post) => ({ slug: post.slug }));
}

При такой конфигурации:

1. next build собирает только 100 страниц за несколько секунд.
2. При переходе на 101-й пост Next.js рендерит его на лету, кэширует на Edge CDN и все последующие пользователи получают его мгновенно из кэша.

Продакшн-артефакт: Сквозная система On-Demand ISR (PHP 8.4 + Next.js 16)#

Ниже представлена готовая промышленная связка: PHP-диспатчер вебхуков для WordPress с подписью HMAC-SHA256 и безопасный Route Handler для Next.js 16 с защитой от тайминг-атак.

// ============================================================================
// ЧАСТЬ 1: Next.js 16 Route Handler (app/api/revalidate/route.ts)
// ============================================================================

import { NextRequest, NextResponse } from 'next/server';
import { revalidateTag } from 'next/cache';
import crypto from 'node:crypto';

interface RevalidatePayload {
tag?: string;
slug?: string;
id?: number;
timestamp: number;
}

/**
* Безопасная проверка подписи HMAC-SHA256 с защитой от Timing Attacks.
*/
function verifyHmacSignature(rawBody: string, signatureHeader: string | null, secret: string): boolean {
if (!signatureHeader || !secret) {
  return false;
}

const expectedSignature = crypto
  .createHmac('sha256', secret)
  .update(rawBody)
  .digest('hex');

const trustedBuffer = Buffer.from(expectedSignature, 'utf8');
const userBuffer = Buffer.from(signatureHeader, 'utf8');

if (trustedBuffer.length !== userBuffer.length) {
  return false;
}

return crypto.timingSafeEqual(trustedBuffer, userBuffer);
}

export async function POST(request: NextRequest): Promise<NextResponse> {
const secret = process.env.REVALIDATION_SECRET;
if (!secret) {
  console.error('[Revalidate] REVALIDATION_SECRET is not configured on edge.');
  return NextResponse.json({ message: 'Server configuration error' }, { status: 500 });
}

try {
  const rawBody = await request.text();
  const signature = request.headers.get('X-Agentic-Signature');

  // 1. Криптографическая валидация источника
  if (!verifyHmacSignature(rawBody, signature, secret)) {
    return NextResponse.json({ message: 'Invalid cryptographic signature' }, { status: 401 });
  }

  const payload = JSON.parse(rawBody) as RevalidatePayload;

  // 2. Защита от Replay-атак (окно 5 минут)
  const now = Math.floor(Date.now() / 1000);
  if (Math.abs(now - payload.timestamp) > 300) {
    return NextResponse.json({ message: 'Timestamp outside acceptable window' }, { status: 400 });
  }

  const tagsToPurge: string[] = [];

  if (payload.tag) {
    tagsToPurge.push(payload.tag);
  }
  if (payload.id) {
    tagsToPurge.push(`post:${payload.id}`);
  }
  if (payload.slug) {
    tagsToPurge.push(`post:${payload.slug}`);
  }

  // Всегда инвалидируем общий список постов
  tagsToPurge.push('posts');

  // 3. Атомарный сброс тегов в Data Cache Next.js
  for (const tag of tagsToPurge) {
    revalidateTag(tag);
  }

  return NextResponse.json({
    revalidated: true,
    purgedTags: tagsToPurge,
    timestamp: Date.now(),
  });
} catch (error) {
  console.error('[Revalidate] Error processing webhook:', error);
  return NextResponse.json({ message: 'Error parsing request body' }, { status: 400 });
}
}

// ============================================================================
// ЧАСТЬ 2: WordPress Dispatcher (wp-content/mu-plugins/agentic-revalidation.php)
// Код на PHP 8.4+ для отправки подписанных вебхуков из ядра WordPress:
// ============================================================================
/*
<?php
declare(strict_types=1);

namespace AgenticLab\Integration;

final class AgenticRevalidationDispatcher {
  private const string REVALIDATE_URL = 'https://frontend.agenticlab.com/api/revalidate';

  public static function init(): void {
      add_action('transition_post_status', [self::class, 'handle_status_transition'], 10, 3);
      add_action('wp_trash_post', [self::class, 'handle_post_deletion'], 10, 1);
  }

  public static function handle_status_transition(string $new_status, string $old_status, \WP_Post $post): void {
      // Срабатывает только при публикации, обновлении или снятии с публикации
      if ($new_status !== 'publish' && $old_status !== 'publish') {
          return;
      }

      if (wp_is_post_revision($post->ID) || wp_is_post_autosave($post->ID)) {
          return;
      }

      self::dispatch_revalidation([
          'id'        => $post->ID,
          'slug'      => $post->post_name,
          'tag'       => 'post:' . $post->ID,
          'timestamp' => time(),
      ]);
  }

  public static function handle_post_deletion(int $post_id): void {
      self::dispatch_revalidation([
          'id'        => $post_id,
          'tag'       => 'post:' . $post_id,
          'timestamp' => time(),
      ]);
  }

  private static function dispatch_revalidation(array $payload): void {
      $secret = defined('NEXTJS_REVALIDATION_SECRET') ? NEXTJS_REVALIDATION_SECRET : '';
      if (empty($secret)) {
          return;
      }

      $json_payload = wp_json_encode($payload);
      $signature = hash_hmac('sha256', $json_payload, $secret);

      wp_remote_post(self::REVALIDATE_URL, [
          'method'      => 'POST',
          'timeout'     => 5,
          'blocking'    => false, // Не блокируем админку WP, отправка асинхронна!
          'headers'     => [
              'Content-Type'        => 'application/json',
              'X-Agentic-Signature' => $signature,
          ],
          'body'        => $json_payload,
      ]);
  }
}

add_action('init', [AgenticRevalidationDispatcher::class, 'init']);
*/

Распространённые ошибки#

Резюме архитектора#

Построение высокопроизводительного слоя доставки контента на базе Next.js 16 и WordPress базируется на трех правилах:

• Отказ от Time-based кэширования: Переход на бессрочный кэш с событийно-ориентированной инвалидацией On-Demand ISR (revalidateTag).
• Криптографический контур: Подписание вебхуков инвалидации по стандарту HMAC-SHA256 с верификацией через crypto.timingSafeEqual.
• Масштабируемая сборка: Предкомпиляция только ключевых страниц в generateStaticParams() в сочетании с ленивой фоновой генерацией dynamicParams = true.