Prerrenderizado Parcial (PPR)

Sirve un shell estático al instante y transmite contenido dinámico en límites Suspense -- lo mejor de renderizado estático y dinámico.

Receta

Tarjeta de referencia rápida -- lista para copiar y pegar.

// next.config.ts -- habilitar PPR
import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    ppr: true, // o "incremental" para optar por ruta
  },
};
 
export default config;

// app/page.tsx -- shell estático con agujeros dinámicos
import { Suspense } from "react";
import { cookies } from "next/headers";
 
export default function Page() {
  return (
    <main>
      <h1>Bienvenido a la Tienda</h1>  {/* Shell estático */}

Cuándo usarlo: Tienes una página donde la mayoría del contenido es estático (información de producto, texto de marketing) pero una pequeña parte depende de la solicitud (sesión del usuario, carrito, personalización).

Ejemplo Funcional

// next.config.ts
import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    ppr: "incremental", // optar por ruta
  },
};
 
export default config;

// app/products/[slug]/page.tsx
import { Suspense } from "react";
import { cookies } from "next/headers";
import { db } from "@/lib/db";
import { AddToCartButton } from "./add-to-cart";
 
// Optar esta ruta en PPR
export const experimental_ppr = true;

Lo que esto demuestra:

• Habilitar PPR incrementalmente por ruta con experimental_ppr = true
• La información del producto (nombre, precio, descripción, imagen) es el shell estático -- prerrenderizado en tiempo de compilación y servido desde el CDN
• Las recomendaciones personalizadas y productos vistos recientemente son agujeros dinámicos -- usan cookies() y se transmiten en tiempo de solicitud
• Los fallbacks de skeleton aparecen al instante como parte del shell estático
• generateStaticParams prerrenderiza páginas de producto en tiempo de compilación

Profundización

Cómo Funciona

• Con PPR, Next.js prerrenderiza las partes estáticas de una página en tiempo de compilación, incluyendo los fallbacks de Suspense. El resultado es un shell HTML completo almacenado en el CDN.
• Cuando llega una solicitud, el shell estático se envía inmediatamente (latencia de edge). El servidor luego reanuda el renderizado de las porciones dinámicas (componentes que llaman cookies(), headers(), searchParams, o cache: "no-store").
• El contenido dinámico es transmitido en los límites de Suspense, reemplazando los skeletons de fallback conforme cada límite se resuelve.
• La idea clave: Los límites de Suspense definen la división estática/dinámica. Todo lo que está fuera de un límite de Suspense con un hijo dinámico es parte del shell estático. Todo lo que está dentro es un agujero dinámico.
• PPR combina el rendimiento de la generación estática (TTFB instantáneo desde CDN) con la flexibilidad del renderizado dinámico (contenido personalizado en tiempo de solicitud).

Variaciones

Adopción incremental (optar por ruta):

// next.config.ts
export default { experimental: { ppr: "incremental" } };
 
// Solo esta página usa PPR
// app/products/[slug]/page.tsx
export const experimental_ppr = true;

Todas las rutas PPR (global):

// next.config.ts
export default { experimental: { ppr: true } };
// Todas las rutas automáticamente usan PPR

Múltiples agujeros dinámicos con fuentes de datos independientes:

export default function Page() {
  return (
    <main>
      <StaticNav />
      <StaticHero />
 
      {/* Cada límite Suspense es un agujero dinámico independiente */}
      <Suspense fallback={<UserBarSkeleton />}>
        <UserBar

Notas de TypeScript

// Exportación de optar por ruta en PPR
export const experimental_ppr: boolean = true;
 
// Tipo next.config.ts
import type { NextConfig } from "next";
const config: NextConfig = {
  experimental: {
    ppr: true | "incremental",

Gotchas

• PPR es experimental -- A partir de Next.js 15/16, PPR requiere el flag experimental.ppr. La API puede cambiar. Solución: Fija tu versión de Next.js y prueba exhaustivamente antes del uso en producción.

• La colocación del límite Suspense determina la división -- Si olvidas envolver un componente dinámico en Suspense, la página completa se vuelve dinámica. Solución: Siempre envuelve componentes que usan funciones dinámicas en un límite <Suspense>.

• La calidad del fallback importa -- El fallback de Suspense es parte del shell estático y es visible instantáneamente para todos los usuarios. Un fallback pobre crea una mala primera impresión. Solución: Usa skeletons bien diseñados que coincidan con la forma y tamaño del contenido real.

• Los agujeros dinámicos añaden costo de servidor -- Cada agujero dinámico requiere computación de servidor en tiempo de solicitud. Demasiados agujeros dinámicos anulan los beneficios del CDN. Solución: Consolida datos dinámicos relacionados en menos límites de Suspense.

• No PPR en Edge Runtime para todos los proveedores -- PPR requiere que la plataforma de hosting soporte streaming y la API postpone. Solución: Verifica que tu plataforma de despliegue soporte PPR (Vercel lo soporta nativamente).

• Los componentes de cliente en el shell estático siguen enviando JavaScript -- PPR hace el HTML estático, pero los componentes de cliente siguen hidratándose en el cliente. Solución: Mantén el shell estático compuesto principalmente de Server Components para JavaScript mínimo.

Alternativas

FAQs

<Suspense fallback={<UserBarSkeleton />}>
  <UserBar />       {/* cookies() */}
</Suspense>
<Suspense fallback={<PricingSkeleton />}>
  <LivePricing />   {/* cache: "no-store" */}

// next.config.ts
export default { experimental: { ppr: "incremental" } };
 
// app/products/[slug]/page.tsx
export const experimental_ppr = true;

export const experimental_ppr: boolean = true;

Relacionado

• Estático vs Dinámico -- Entendiendo los modos de renderizado
• Streaming -- Cómo Suspense habilita el renderizado progresivo
• Server Components -- Los bloques de construcción del shell estático
• Cookies & Headers -- Funciones dinámicas que crean agujeros dinámicos