¿Cómo funciona la revalidación bajo demanda (ISR)?

Question

Accepted Answer

**La revalidación bajo demanda** te permite invalidar páginas en caché/estáticas **exactamente cuando los datos cambian** — en lugar de esperar un intervalo basado en tiempo. Es el complemento preciso de ISR basado en tiempo (`revalidate: N`).

## Basado en tiempo vs bajo demanda

```tsx
// Time-based: page refreshes on a fixed schedule (may serve stale data up to N seconds)
export const revalidate = 3600; // every hour

// On-demand: refresh the INSTANT the underlying data changes — no waiting, no waste
```

ISR basado en tiempo es simple pero imperfecto: demasiado corto = regeneración innecesaria; demasiado largo = contenido obsoleto. La revalidación bajo demanda soluciona esto al activar la revalidación desde tu propio código cuando un cambio realmente ocurre.

## Las dos APIs bajo demanda

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

// 1. Tag your fetches, then invalidate by tag
await fetch("https://api/posts", { next: { tags: ["posts"] } });
revalidateTag("posts");      // refresh EVERY page/fetch tagged "posts"

// 2. Or invalidate a specific path
revalidatePath("/blog/my-post");
```

## Un flujo real: webhook de CMS

```ts
// app/api/revalidate/route.ts — called by your CMS when an editor publishes
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get("secret");
  if (secret !== process.env.REVALIDATE_SECRET) {       // verify it's really your CMS
    return NextResponse.json({ ok: false }, { status: 401 });
  }
  revalidateTag("posts");                                // rebuild affected pages now
  return NextResponse.json({ revalidated: true });
}
```

El flujo: el editor publica en el CMS → el CMS llama tu webhook → `revalidateTag("posts")` invalida el caché → el próximo visitante obtiene HTML estático regenerado recientemente. Las páginas permanecen estático-rápidas **y** se actualizan inmediatamente al publicar.

## Después de una mutación de Server Action

```tsx
"use server";
export async function createPost(data) {
  await db.post.create({ data });
  revalidateTag("posts"); // user sees their new post immediately
}
```

## Por qué es importante

La revalidación bajo demanda te da el santo grial: **rendimiento estático con frescura en tiempo real**.

En lugar de adivinar un intervalo de revalidación, invalidas precisamente cuando el contenido cambia — mediante webhooks (publicación en CMS) o después de mutaciones de Server Action — usando `revalidateTag`/`revalidatePath`.

Elimina tanto el contenido obsoleto como la regeneración excesiva innecesaria, haciendo que ISR sea práctico para contenido que se actualiza de manera impredecible.