¿Qué es Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** es un modelo de renderizado de Next.js que combina **contenido estático y dinámico en una sola página** — sirve un shell estático instantáneo mientras transmite las partes dinámicas. Difumina la antigua línea todo-o-nada entre SSG y SSR. ## El problema que resuelve Tradicionalmente una página era *o bien* completamente estática (rápida, pero no puede tener contenido por usuario) *o* completamente dinámica (puede ser personalizada, pero más lenta e imposible de cachear). Las páginas reales son mixtas: una página de producto tiene un diseño/descripción estático pero un contador de carrito dinámico y recomendaciones personalizadas. PPR permite que **la misma página** sea ambas cosas. ## Cómo funciona ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` La idea clave: todo **fuera** de un límite `` es **prerrenderizado como un shell estático** en tiempo de compilación. Cualquier cosa **dentro** de Suspense (que lee datos dinámicos — cookies, headers, búsquedas sin cacheo) se trata como un "agujero" dinámico que se transmite en tiempo de solicitud. ## La secuencia de entrega ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` El usuario obtiene una primera pintura significativa instantáneamente (shell estático desde CDN), luego las partes personalizadas se rellenan — lo mejor de ambos: velocidad estática *y* contenido dinámico, sin enrutamiento separado ni decisión de modo de renderizado. ## Estado ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Por qué es importante PPR elimina la falsa opción entre "rápido pero estático" y "dinámico pero lento". Al prerrenderizar el shell y transmitir solo los agujeros dinámicos (marcados por Suspense), una sola página entrega una primera pintura instantánea desde CDN más contenido personalizado — automáticamente, sin dividir la página ni elegir manualmente SSG vs SSR. Representa hacia dónde se dirige el renderizado de Next.js: composición estática/dinámica granular por componente.