Featured image of post Partial Prerendering (PPR) en Next.jsFeatured image of post Partial Prerendering (PPR) en Next.js

Partial Prerendering (PPR) en Next.js

Achieve optimal performance with PPR, combining React Suspense to inject user elements dynamically.

Partial Prerendering (PPR) combina contenido estático prerenderizado con contenido dinámico transmitido vía streaming en una misma página.

El problema

SSG: rápido pero contenido obsoleto. SSR: contenido fresco pero más lento. PPR ofrece lo mejor de ambos: HTML estático inmediato + partes dinámicas en streaming.

Cómo funciona

Next.js prerenderiza el shell estático de la página. Los componentes dinámicos (con cookies(), headers(), searchParams) se renderizan bajo demanda.

Configuración

experimental.ppr = 'incremental' en next.config.js. Los componentes dinámicos se envuelven en Suspense. PPR solo aplica donde se detectan datos dinámicos.

Beneficios

TTFB de SSG + frescura de SSR. Reducción de costos de servidor. Mejor experiencia de usuario con contenido visible inmediatamente.

Última actualización 2026/07/12 04:12 JST