Partial Prerendering (PPR)
Combina estático e dinâmico na mesma página: shell estático servido instantaneamente, partes dinâmicas via streaming.
Definição
Partial Prerendering (PPR) é uma feature experimental do Next.js que combina o melhor de SSG e SSR em uma única página. O 'shell' (header, footer, layout) é prerenderizado estaticamente. Componentes dentro de Suspense são streamed dinamicamente.
Problema → Solução
Problema
Páginas mistas (header estático + dados de usuário dinâmicos) precisam escolher: tudo SSG (perde dinamismo) ou tudo SSR (perde performance estática).Solução
PPR pré-renderiza a casca estática e marca regiões com Suspense para streaming dinâmico. Usuário vê a página instantaneamente (cache estático) e dados dinâmicos chegam via streaming.Dica de entrevista
Tip
PPR ainda é experimental. Habilite via experimental.ppr no next.config. Não tem suporte oficial ainda em todos os hosts além da Vercel.Código
// app/page.tsx
export const experimental_ppr = true;
export default function Page() {
return (
<>
{/* Shell estático — pré-renderizado em build */}
<Header />
<Nav />
{/* Dinâmico — streamed por request */}
<Suspense fallback={<Skeleton />}>
<UserGreeting /> {/* usa cookies() */}
</Suspense>
<Footer />
</>
);
}Perguntas de entrevista
Q.PPR vs SSR streaming?▾
A.SSR streaming: tudo é gerado a cada request (mesmo o shell). PPR: shell estático cached em CDN, apenas o dinâmico é gerado por request. PPR é mais rápido para o shell.
Q.Quando PPR não vale?▾
A.Páginas onde quase tudo é dinâmico (não há shell estático real) ou onde o shell muda muito por user. Aí SSR puro é mais simples.
Q.Como habilitar PPR?▾
A.experimental: { ppr: true } em next.config.js + export const experimental_ppr = true no layout/page. Versões mais novas podem ter API estável.
Termos relacionados
38/122← →