Pré-renderização Parcial (PPR)

Técnica híbrida combinando shells estáticos pré-renderizados no tempo de build com conteúdo dinâmico transmitido via Suspense. Melhor para Apps híbridos, cenários de performance otimizada e Páginas modernas que misturam UI estática com dados dinâmicos.

Tempo de Build

React.renderToStaticMarkup()
Gerar shell estático
Armazenar shell estático

Tempo de Execução

🌐
Request
Response
🖥️
Servidor envia shell estático
Servidor busca dados dinâmicos
Servidor transmite conteúdo dinâmico

Cliente

Cliente envia requisição
Cliente recebe shell estático
Cliente recebe conteúdo dinâmico
React.hydrate()
✨Página interativa
Benefícios x Trade-offs

Benefits

  • •Shell Estático Instantâneo: Carregamento inicial rápido da página
  • •Aprimoramento Progressivo: Conteúdo dinâmico flui
  • •UX Otimizada: Usuários veem conteúdo imediatamente
  • •Arquitetura Flexível: Mistura conteúdo estático e dinâmico

Trade-offs

  • •Complexidade do Suspense: Requer wrappers Suspense adequados
  • •Atrasos de buffer do navegador: Pode atrasar conteúdo dinâmico
  • •Status codes não podem mudar: Definidos antes do streaming começar
  • •Experimental: API e melhores práticas ainda evoluindo
Como implementar?

PPR combina shell estático com streaming de conteúdo dinâmico. Requer React 19 e RSC. Introduzido no Next.js 14.1 (experimental), estável no 15+.

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

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />
      </Suspense>
    </div>
  );
}
  • •Habilite PPR via configuração experimental ppr em next.config.js
  • •Requer React 19 e React Server Components
  • •Envolva componentes dinâmicos em <Suspense fallback={<Skeleton />}>
  • •Use diretiva 'use cache' para conteúdo dinâmico cacheável
  • •Partes estáticas são pré-renderizadas no tempo de build