Regeneração Estática Incremental (ISR)

SSG com revalidação cronometrada que regenera páginas em background. Excelente para Catálogos, sites de Notícias e Listagens de produtos que precisam de atualizações periódicas sem rebuilds completos.

Servidor

🌐
Request
Response
🖥️
Servidor verifica cache
Cache válido ou expirado
Servidor busca dados
React.renderToString()
Servidor armazena em cache
Servidor envia HTML renderizado

Cliente

Cliente recebe HTML
React.hydrate()
✨Página interativa
Benefícios x Trade-offs

Benefits

  • •Melhor dos Dois Mundos: Performance estática + atualizações dinâmicas
  • •Revalidação Automática: Conteúdo permanece fresco
  • •Escalável: Lida graciosamente com picos de tráfego
  • •Custo Eficiente: Carga reduzida do servidor

Trade-offs

  • •Breve desatualização: Conteúdo pode estar ligeiramente desatualizado
  • •Overhead de revalidação: Regeneração em background tem custos
  • •Cache complexo: Precisa gerenciar tempos de revalidate
  • •Atraso na primeira requisição: Pode acionar regeneração
Como implementar?

ISR usa Server Components assíncronos com revalidação no nível da página. Use generateStaticParams para rotas dinâmicas.

export const revalidate = 3600; // 1 hora

export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }];
}

export default async function ISRComponent({ params }: { params: { id: string } }) {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • •Componentes são funções assíncronas (sem diretiva 'use client')
  • •Não pode usar hooks React (useState, useEffect, etc.)
  • •Adicione 'export const revalidate = 3600' no nível da página (1 hora)
  • •Use generateStaticParams() para rotas dinâmicas
  • •Use revalidatePath() ou revalidateTag() para revalidação sob demanda