Prerenderizado Parcial (PPR)

Técnica híbrida combinando shells estáticos prerenderizados en tiempo de build con contenido dinámico transmitido vía Suspense. Mejor para Apps híbridas, escenarios de rendimiento optimizado y Páginas modernas que mezclan UI estática con datos dinámicos.

Tiempo de Build

React.renderToStaticMarkup()

Generar shell estático

Almacenar shell estático

Tiempo de Ejecución

🌐

Request

Response

🖥️

Servidor envía shell estático

Servidor obtiene datos dinámicos

Servidor transmite contenido dinámico

Cliente

Cliente envía solicitud

Cliente recibe shell estático

Cliente recibe contenido dinámico

React.hydrate()

✨Página interactiva

Beneficios x Trade-offs

Benefits

•Shell Estático Instantáneo: Carga inicial rápida de la página
•Mejora Progresiva: Contenido dinámico fluye
•UX Optimizada: Los usuarios ven contenido inmediatamente
•Arquitectura Flexible: Mezcla contenido estático y dinámico

Trade-offs

•Complejidad del Suspense: Requiere wrappers Suspense adecuados
•Retrasos de buffer del navegador: Puede retrasar contenido dinámico
•Los códigos de estado no pueden cambiar: Establecidos antes de que comience el streaming
•Experimental: API y mejores prácticas aún evolucionando

¿Cómo implementar?

PPR combina shell estático con streaming de contenido dinámico. Requiere React 19 y RSC. Introducido en Next.js 14.1 (experimental), estable en 15+.

// next.config.js
export default {
  experimental: {
    ppr: true, // o cacheComponents: true
  },
};

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />
      </Suspense>
    </div>
  );
}

•Habilita PPR via configuración experimental ppr en next.config.js
•Requiere React 19 y React Server Components
•Envuelve componentes dinámicos en <Suspense fallback={<Skeleton />}>
•Usa directiva 'use cache' para contenido dinámico cacheable
•Las partes estáticas se prerenderizan en tiempo de build