Hoe werkt on-demand revalidation (ISR)?

Question

Accepted Answer

**On-demand revalidation** stelt je in staat om gecachede/statische pagina's **precies te invalideren wanneer gegevens veranderen** — in plaats van te wachten op een op tijd gebaseerd interval. Het is het precieze complement op tijd-gebaseerde ISR (`revalidate: N`).

## Waarom het belangrijk is

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

Tijd-gebaseerde ISR is eenvoudig maar onvolmaakt: te kort = onnodige regeneratie; te lang = verouderde inhoud. On-demand lost dit op door revalidatie vanuit je eigen code te starten wanneer een wijziging daadwerkelijk plaatsvindt.

## De twee on-demand APIs

```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");
```

## Een echte workflow: CMS webhook

```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 });
}
```

De stroom: editor publiceert in de CMS → CMS roept je webhook aan → `revalidateTag("posts")` maakt de cache ongeldig → de volgende bezoeker krijgt vers gegenereerde statische HTML. Pagina's blijven statisch-snel **en** updaten onmiddellijk bij publicatie.

## Na een Server Action mutatie

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

## Waarom het belangrijk is

On-demand revalidation geeft je het ultieme voordeel: **statische prestatie met realtime versheid**.

In plaats van een revalidatie-interval in te schatten, invalideer je precies wanneer inhoud verandert — via webhooks (CMS-publicatie) of na Server Action mutaties — met behulp van `revalidateTag`/`revalidatePath`.

Het elimineert zowel verouderde inhoud als verspilde over-regeneratie, waardoor ISR praktisch wordt voor inhoud die onvoorspelbaar bijgewerkt wordt.