Regeneración Estática Incremental (ISR)

SSG con revalidación cronometrada que regenera páginas en background. Excelente para Catálogos, sitios de Noticias y Listados de productos que necesitan actualizaciones periódicas sin rebuilds completos.

Servidor

🌐
Request
Response
🖥️
Servidor verifica caché
Caché válido o expirado
Servidor obtiene datos
React.renderToString()
Servidor almacena en caché
Servidor envía HTML renderizado

Cliente

Cliente recibe HTML
React.hydrate()
Página interactiva
Beneficios x Trade-offs

Benefits

  • Mejor de Ambos Mundos: Rendimiento estático + actualizaciones dinámicas
  • Revalidación Automática: El contenido permanece fresco
  • Escalable: Maneja graciosamente picos de tráfico
  • Costo Eficiente: Carga reducida del servidor

Trade-offs

  • Breve obsolescencia: El contenido puede estar ligeramente desactualizado
  • Overhead de revalidación: La regeneración en background tiene costos
  • Caché complejo: Necesita gestionar tiempos de revalidate
  • Retraso en primera solicitud: Puede activar regeneración
¿Cómo implementar?

ISR usa Server Components asíncronos con revalidación a nivel de página. Usa generateStaticParams para rutas 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>;
}
  • Los componentes son funciones asíncronas (sin directiva 'use client')
  • No puedes usar hooks de React (useState, useEffect, etc.)
  • Agrega 'export const revalidate = 3600' a nivel de página (1 hora)
  • Usa generateStaticParams() para rutas dinámicas
  • Usa revalidatePath() o revalidateTag() para revalidación bajo demanda