Comment fonctionne la revalidation à la demande (ISR) ?

Question

Accepted Answer

**La revalidation à la demande** vous permet d'invalider les pages en cache/statiques **exactement quand les données changent** — plutôt que d'attendre un intervalle basé sur le temps. C'est le complément précis de l'ISR basé sur le temps (`revalidate: N`).

## Basé sur le temps vs à la demande

```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
```

L'ISR basé sur le temps est simple mais imparfait : trop court = régénération inutile ; trop long = contenu obsolète. À la demande corrige cela en déclenchant la revalidation depuis votre propre code quand un changement se produit réellement.

## Les deux APIs à la demande

```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 vrai flux : webhook 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 });
}
```

Le flux : l'éditeur publie dans le CMS → le CMS appelle votre webhook → `revalidateTag("posts")` invalide le cache → le visiteur suivant obtient du HTML statique fraîchement régénéré. Les pages restent rapides en tant que statique **et** se mettent à jour immédiatement à la publication.

## Après une mutation Server Action

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

## Pourquoi c'est important

La revalidation à la demande vous donne le Graal : **performance statique avec fraîcheur en temps réel**.

Au lieu de deviner un intervalle de revalidation, vous invalidez précisément quand le contenu change — via des webhooks (publication CMS) ou après des mutations Server Action — en utilisant `revalidateTag`/`revalidatePath`.

Cela élimine à la fois le contenu obsolète et la surrégénération gaspilleuse, rendant l'ISR pratique pour le contenu qui se met à jour de manière imprévisible.