O que é Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** é um modelo de renderização do Next.js que combina **conteúdo estático e dinâmico em uma única página** — servindo um shell estático instantâneo enquanto faz streaming das partes dinâmicas. Desembaça a antiga linha tudo-ou-nada entre SSG e SSR. ## O problema que resolve Tradicionalmente, uma página era *ou* totalmente estática (rápida, mas sem conteúdo por usuário) *ou* totalmente dinâmica (pode ser personalizada, mas mais lenta e sem cache). Páginas reais são mistas: uma página de produto tem layout/descrição estática, mas contagem de carrinho dinâmica e recomendações personalizadas. PPR permite que a **mesma página** seja ambos. ## Como 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 */}

); } ``` A ideia principal: tudo **fora** de um limite `` é **pré-renderizado como um shell estático** no momento da construção. Qualquer coisa **dentro** de Suspense (que lê dados dinâmicos — cookies, headers, buscas não armazenadas em cache) é tratada como um "buraco" dinâmico que faz streaming no momento da requisição. ## A sequência 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 ``` O usuário obtém uma primeira pintura significativa imediatamente (shell estático do CDN), depois os pedaços personalizados são preenchidos — o melhor dos dois: velocidade estática *e* conteúdo dinâmico, sem roteamento separado ou decisão de modo de renderização. ## Status ```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 que isso importa PPR remove a escolha falsa entre "rápido mas estático" e "dinâmico mas lento." Ao pré-renderizar o shell e fazer streaming apenas dos buracos dinâmicos (marcados por Suspense), uma única página entrega pintura instantânea de CDN mais conteúdo personalizado — automaticamente, sem dividir a página ou escolher manualmente SSG vs SSR. Representa para onde a renderização do Next.js está indo: composição granular, por componente, estática/dinâmica.