Public pages

Core Idea

Public pages mostram o mesmo conteúdo pra todo usuário (landing pages, listagens de produto, marketing) e por isso podem ser prerenderizadas e reutilizadas, reduzindo custo de servidor e acelerando carregamento.

Key Concepts

• Static component: componente cujo output nunca muda entre requisições (não depende de dados externos, headers, params, hora atual ou valores aleatórios) — Next.js prerenderiza no build time.
• Dynamic component: componente que depende de dados que podem mudar (fetch externo, request-specific) — por padrão busca dados frescos a cada requisição, o que bloqueia a resposta inteira se não tratado.
• 'use cache': diretiva que transforma um componente dinâmico em cache component — se os inputs estiverem disponíveis antes da requisição, pode ser prerenderizado como um componente estático.
• Suspense boundary: delimita onde a resposta é fatiada em streaming, com fallback prerenderizado junto ao resto do conteúdo estático.
• Partial Prerendering (PPR): resultado de combinar shell estático + cache components + streaming — parte da rota é servida instantaneamente via CDN, parte é renderizada e streamada no request.

Code Examples

import db from '@/db'
import { List } from '@/app/products/ui'

async function ProductList() {
  'use cache'
  const products = await db.product.findMany()
  return <List items={products} />
}

export default async function Page() {
  return (
    <>
      <Header />
      <ProductList />
    </>
  )
}

• O que demonstra: 'use cache' transforma um componente que faria fetch bloqueante em um cache component prerenderizável.

import { Suspense } from 'react'

export default async function Page() {
  return (
    <>
      <Suspense fallback={<PromotionSkeleton />}>
        <PromotionContent />
      </Suspense>
      <Header />
      <ProductList />
    </>
  )
}

• O que demonstra: envolver um componente request-specific (não cacheável) em <Suspense> desbloqueia a resposta via streaming, gerando PPR.

Anti-patterns

• Await de dado não-cacheado fora de <Suspense>: bloqueia a rota inteira de ser prerenderizada — Next.js emite warning (blocking-prerender-dynamic) nesse caso.

Key Takeaways

1. Decida entre cachear (dado compartilhado entre usuários) ou streamar (dado específico da requisição) para desbloquear uma rota que tem partes dinâmicas.
2. next build reporta o status da rota: ○ (Static), ◐ (Partial Prerender) — use pra confirmar se a estratégia funcionou.
3. Cache component e static component podem coexistir na mesma página sem configuração explícita de rota.

Connects To

• Cache Components / use cache: mecanismo central usado aqui para tornar um componente dinâmico prerenderizável.
• Streaming: base técnica do PPR usado para a parte não-cacheável (banner de promoção).