React Academy · Lección

Regeneración estática incremental (ISR)

Regenere páginas estáticas según una programación o bajo demanda sin volver a desplegar toda la aplicación.

Regeneración estática incremental (ISR) es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué es ISR?

La regeneración estática incremental permite que Next.js sirva una página estática preconstruida mientras la regenera en segundo plano después de un intervalo especificado; combina la velocidad del HTML estático con la actualización del renderizado en el servidor.

Cómo funciona ISR

En la primera solicitud, Next.js sirve el HTML estático almacenado en caché. Cuando vence la ventana de revalidación, la siguiente solicitud activa la regeneración en segundo plano. Las solicitudes posteriores sirven la página nueva cuando termina la regeneración.

Habilitar ISR con revalidate

Exporte una constante revalidate o establezca next: { revalidate: N } en una llamada a fetch dentro de una página Server Component.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR con rutas dinámicas

Combine generateStaticParams con revalidate para preconstruir las páginas dinámicas más populares y volver a validarlas según una programación.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Revalidación bajo demanda

Llame a revalidatePath() o revalidateTag() desde una Server Action, una ruta de API o un controlador de webhook para regenerar páginas específicas inmediatamente, sin esperar al intervalo.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Comportamiento de fallback para rutas desconocidas

Para las rutas dinámicas que no están en generateStaticParams, establezca dynamicParams = true (valor predeterminado) para renderizarlas bajo demanda y almacenarlas en caché, o false para devolver un 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Stale-While-Revalidate

Durante la regeneración, Next.js sirve la página obsoleta hasta que la nueva versión está lista. Los usuarios siempre reciben una respuesta, sin tener que esperar a que los datos estén actualizados.

ISR frente a SSR y contenido estático

Estático: se genera una vez y nunca cambia. ISR: se preconstruye y se regenera según una programación. SSR: se renderiza de nuevo en cada solicitud. Elija ISR para contenido que cambia ocasionalmente, pero que se beneficia de la velocidad de servir contenido estático.

Limitaciones de ISR

ISR no es adecuada para contenido personalizado (datos específicos de cada usuario) ni para datos que deban estar disponibles en tiempo real. Para esos casos, use fetches con no-store y SSR.

ISR en Pages Router (getStaticProps)

En Pages Router, ISR usa getStaticProps con un valor de retorno revalidate; es el mismo concepto con una API diferente.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

Verificar ISR

Compruebe el encabezado de respuesta x-nextjs-cache: HIT significa que se sirvió desde la caché, MISS que se renderizó recientemente y STALE que se está sirviendo contenido obsoleto mientras se vuelve a validar.

Comprobación rápida

¿Qué ocurre cuando un usuario solicita una página ISR cuya ventana de revalidación acaba de vencer?

Repaso

ISR preconstruye las páginas y las vuelve a validar cada N segundos mediante export const revalidate = N. Use generateStaticParams para las rutas dinámicas populares y la revalidación bajo demanda mediante revalidatePath/Tag para actualizar el contenido inmediatamente después de las mutaciones.

Preguntas frecuentes

¿La lección «Regeneración estática incremental (ISR)» es gratis?

Sí — el texto completo de «Regeneración estática incremental (ISR)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Regeneración estática incremental (ISR)»?

Regenere páginas estáticas según una programación o bajo demanda sin volver a desplegar toda la aplicación. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Regeneración estática incremental (ISR)»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

fetch() con opciones de caché en Next.js
unstable_cache y React cache()
Regeneración estática incremental (ISR)
Server Actions para mutaciones de datos

← Volver a React Academy