Capítulo 75 de 456

Rendering Philosophy

Core Idea

Next.js trata estático vs. dinâmico como um espectro no nível do componente, não da rota — diferente da maioria dos frameworks, que fazem essa escolha no nível da rota inteira.

Key Concepts

  • Fronteira no nível de componente: uma página pode ter shell estático instantâneo + seções dinâmicas que streamam, cache component dentro de rota dinâmica, página estática atualizável sem redeploy.
  • Build-time prerendering: todo o site é gerado no build; simples de hospedar (arquivos estáticos), mas qualquer mudança exige rebuild.
  • Route-level boundaries: cada rota é 100% estática ou 100% dinâmica; simples de raciocinar, mas tudo-ou-nada por rota.
  • Component-level boundaries (abordagem do Next.js): estático e dinâmico coexistem na mesma resposta streamada — trade-off é complexidade de infraestrutura, não de código de app.
  • Functional fidelity: toda feature do Next.js funciona corretamente na plataforma; medido pelo adapter test suite, é binário (passa ou não passa).
  • Performance fidelity: as features atingem a performance ótima (ex. shell PPR servido em latência de CDN); é um espectro, varia por plataforma.

Reference Tables

Implicação de infraPor quê
StreamingResposta única mistura conteúdo estático e dinâmico
Coordenação de cacherevalidateTag()/revalidatePath() podem invalidar cache em múltiplas instâncias
Consistência de cacheRevalidação regenera HTML e RSC payload juntos; dessincronia gera dados inconsistentes na navegação
Entrega do shell PPR em latência de CDNPode exigir integração extra de plataforma para armazenar o shell separadamente e retomar o render dinâmico

Anti-patterns

  • Assumir que toda plataforma que "roda Next.js" tem fidelidade de performance igual: functional fidelity é binário (passa no adapter test suite ou não), mas performance fidelity varia — confundir os dois leva a expectativas erradas de deploy.

Key Takeaways

  1. A escolha arquitetural central do Next.js é permitir estático e dinâmico dentro da mesma página/resposta, não apenas por rota.
  2. PPR, Cache Components (use cache) e revalidação sob demanda não são features incrementais isoladas — são a materialização dessa filosofia.
  3. Ao avaliar uma plataforma de deploy, separe "funciona corretamente" (adapter test suite) de "funciona com performance ótima" (CDN/edge específico).

Connects To

  • Public pages (ch073): exemplo prático dessa filosofia aplicada (cache + streaming na mesma página).
  • Cache Components / use cache: mecanismo que implementa a fronteira em nível de componente.
  • Streaming: requisito de infraestrutura decorrente dessa filosofia.