Renderizado en Next.js: SSG, SSR e ISR

Base arquitectónica#

En una arquitectura Headless WordPress basada en Next.js 16 (App Router), la estrategia de renderizado y gestión de caché define el equilibrio entre la experiencia del usuario (Time to First Byte, TTFB), la carga sobre la base de datos del CMS y la inmediatez del contenido visualizado.

El enfoque histórico de Pages Router (división entre getStaticProps, getServerSideProps e intervalos rígidos de revalidate: N) ha sido reemplazado en la arquitectura moderna por un sistema de caché en cuatro niveles de Next.js:

1. Request Memoization: Deduplicación de peticiones fetch idénticas dentro de un mismo pase de renderizado de Server Components (RSC) mediante React Cache.
2. Data Cache: Caché persistente de datos del servidor entre solicitudes, orquestada mediante etiquetas (next: { tags: ['posts', 'post:42'] }) o la directiva declarativa "use cache" junto con cacheTag().
3. Full Route Cache: Almacenamiento automático del HTML renderizado y el payload de Server Components (RSC Payload) en el servidor edge y la red CDN.
4. Router Cache: Caché en memoria del navegador del cliente, que almacena en sesión los segmentos de ruta explorados durante la navegación.

Comparativa de estrategias fundamentales:

• SSG (Static Site Generation): Precompilación íntegra de páginas durante next build. Proporciona un TTFB mínimo (< 30 ms) servido desde Edge CDNs; sin embargo, en catálogos de 100 000 artículos, la compilación requiere horas y cualquier edición en el CMS exige un despliegue completo de CI/CD.
• SSR (Server-Side Rendering): Generación dinámica del HTML en cada petición entrante (cache: 'no-store'). Garantiza datos en tiempo real, pero somete a los workers PHP de WordPress y a MySQL a un estrés lineal continuo, elevando la latencia a 300–1200 ms.
• Time-based ISR (Incremental Static Regeneration): Caché periódica con intervalo de refresco (revalidate: 60). Presenta una deficiencia estructural: el contenido desfasado persiste durante N segundos y, bajo alta concurrencia, el vencimiento del temporizador puede provocar avalanchas de recálculo (cache stampede).

El estándar de ingeniería moderno — On-Demand Tagged Invalidation (ISR bajo demanda): Las páginas se almacenan indefinidamente en el Edge CDN. En el momento en que un artículo se publica, modifica o elimina en el panel de WordPress, los hooks del núcleo (transition_post_status y post_updated) emiten un webhook firmado criptográficamente (HMAC-SHA256) hacia el Route Handler de Next.js (/api/revalidate). El receptor valida la firma y ejecuta una invalidación atómica de la etiqueta: revalidateTag('post:42'). La página correspondiente es purgada de inmediato de la CDN y reconstruida en segundo plano bajo el patrón Stale-While-Revalidate, manteniendo intactas las 99 999 páginas restantes.

Para catálogos extensos con millones de registros, se adopta un modelo híbrido: generateStaticParams() precompila únicamente los 100 artículos más consultados durante la compilación, mientras que export const dynamicParams = true permite generar y cachear bajo demanda las páginas restantes en cuanto reciben la primera visita.

Modelo mental#

Arquitectura de invalidación instantánea de caché (On-Demand ISR) entre el CMS y el Edge CDN:

+-----------------------------------------------------------------------------------------+
|                                BACKEND DE WORDPRESS CMS                                 |
+-----------------------------------------------------------------------------------------+
| [El editor pulsa "Publicar" / "Actualizar"]                                             |
|         |                                                                               |
|         v                                                                               |
| [Hooks: transition_post_status / post_updated]                                          |
|         |                                                                               |
|         v                                                                               |
| [HMAC-SHA256 Webhook Dispatcher] ---> Envío POST /api/revalidate                         |
|                                       (Payload: { tag: "post:42", ts: 1774600000 })     |
|                                       (Header: X-Agentic-Signature: e3b0c44...)         |
+-----------------------------------------------------------------------------------------+
                                         |
                                         | Petición HTTP Segura
                                         v
+-----------------------------------------------------------------------------------------+
|                            NEXT.JS 16 EDGE ROUTE HANDLER                               |
+-----------------------------------------------------------------------------------------+
| [/api/revalidate/route.ts]                                                             |
|         |                                                                               |
|         +---> [Timing-Safe HMAC Verification: crypto.timingSafeEqual()]                 |
|         |        | (Protección contra timing attacks e invalidaciones no autorizadas)   |
|         |        v                                                                      |
|         +---> [revalidateTag("post:42")]                                                |
|                  |                                                                      |
|                  v                                                                      |
|         [Edge Data Cache / Full Route Cache: ¡Etiqueta purgada!]                        |
+-----------------------------------------------------------------------------------------+
                                         |
                                         v
+-----------------------------------------------------------------------------------------+
|                                    USUARIOS PÚBLICOS                                    |
+-----------------------------------------------------------------------------------------+
| Usuario A (Petición a los +10 ms): Recibe Stale Cache (TTFB de 30 ms)                   |
|          |---> Next.js consulta en segundo plano la API de WP y actualiza la caché      |
| Usuario B (Petición a los +500 ms): ¡Recibe el HTML FRESCO y actualizado!               |
+-----------------------------------------------------------------------------------------+

Casos de uso prácticos#

1. Portales masivos inmobiliarios y de automoción: Precompilación de páginas de aterrizaje principales en compilación (generateStaticParams), mientras que 500 000 fichas individuales se generan y almacenan en caché tras la primera solicitud.
2. Medios de comunicación con alto volumen de publicación: Inserción de etiquetas granulares: la etiqueta posts actualiza el listado principal, mientras post:${id} purga únicamente el artículo editado, conservando el 99.9% de la caché del CDN.
3. Tiendas Headless WooCommerce: Invalidación inmediata del inventario mediante la etiqueta product:stock:${sku} al procesar webhooks de actualización de stock procedentes de ERPs externos.
4. Sincronización de menús y navegación global: Purga de la etiqueta wp:menus ante cambios en la estructura de enlaces en wp-admin, actualizando cabeceras y pies de página en todo el sitio sin reconstruir las páginas estáticas.

Cómo funciona#

Arquitectura de escalabilidad: generateStaticParams + dynamicParams#

Cuando un catálogo contiene 100 000 publicaciones, intentar pre-renderizar la totalidad en generateStaticParams() agota la memoria del entorno de compilación y aborta el proceso de build.

Diseño arquitectónico moderno:

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // Permite la generación bajo demanda de slugs no precompilados

export async function generateStaticParams() {
  // Precompila únicamente los 100 posts más demandados
  const topPosts = await wpClient.getTopPosts({ limit: 100 });
  return topPosts.map((post) => ({ slug: post.slug }));
}

Bajo este esquema:

1. next build genera únicamente 100 páginas en pocos segundos.
2. Al solicitarse el artículo 101, Next.js lo renderiza al vuelo, lo almacena en el Edge CDN y lo sirve de inmediato a todos los visitantes subsecuentes.

Artefacto de producción: Sistema integral de On-Demand ISR (PHP 8.4 + Next.js 16)#

A continuación se detalla la integración completa: despachador de webhooks en PHP 8.4 para WordPress con firma HMAC-SHA256 y un Route Handler seguro para Next.js 16 con verificación a prueba de ataques de tiempo.

// ============================================================================
// PARTE 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;
}

/**
* Verificación segura de firma HMAC-SHA256 inmune a 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 no está configurado en el edge.');
  return NextResponse.json({ message: 'Error de configuración del servidor' }, { status: 500 });
}

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

  // 1. Validación criptográfica del origen
  if (!verifyHmacSignature(rawBody, signature, secret)) {
    return NextResponse.json({ message: 'Firma criptográfica inválida' }, { status: 401 });
  }

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

  // 2. Protección contra ataques de repetición (tolerancia de 5 minutos)
  const now = Math.floor(Date.now() / 1000);
  if (Math.abs(now - payload.timestamp) > 300) {
    return NextResponse.json({ message: 'Marca temporal fuera del rango admitido' }, { 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}`);
  }

  // Invalida siempre el listado general de publicaciones
  tagsToPurge.push('posts');

  // 3. Purga atómica de etiquetas en Data Cache de 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 procesando webhook:', error);
  return NextResponse.json({ message: 'Error analizando cuerpo de la petición' }, { status: 400 });
}
}

// ============================================================================
// PARTE 2: Despachador de WordPress (wp-content/mu-plugins/agentic-revalidation.php)
// Código en PHP 8.4+ para emitir webhooks firmados desde el núcleo de 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 {
      // Se ejecuta solo al publicar, actualizar o retirar de publicación
      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, // ¡Envío asíncrono no bloqueante!
          'headers'     => [
              'Content-Type'        => 'application/json',
              'X-Agentic-Signature' => $signature,
          ],
          'body'        => $json_payload,
      ]);
  }
}

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

Errores comunes#

Preguntas de entrevista#

Resumen del arquitecto#

El despliegue de una capa de entrega de contenido de alto rendimiento con Next.js 16 y WordPress descansa en tres principios directrices:

• Superación del sondeo por temporizadores: Adopción de caché perimetral indefinida con invalidación dirigida por eventos On-Demand ISR (revalidateTag).
• Seguridad criptográfica estricta: Firma de webhooks con HMAC-SHA256 verificada en tiempo constante mediante crypto.timingSafeEqual.
• Precompilación escalable: Generación estática acotada en generateStaticParams() combinada con resolución bajo demanda mediante dynamicParams = true.