Wie funktioniert On-Demand-Revalidierung (ISR)?

Question

Accepted Answer

**On-Demand-Revalidierung** ermöglicht es dir, gecachte/statische Seiten **exakt dann zu invalidieren, wenn sich Daten ändern** — anstatt auf ein zeitbasiertes Intervall zu warten. Es ist das präzise Gegenstück zu zeitbasiertem ISR (`revalidate: N`).

## Zeitbasiert vs. On-Demand

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

Zeitbasiertes ISR ist einfach, aber nicht perfekt: zu kurz = unnötige Regeneration; zu lang = veralteter Inhalt. On-Demand behebt dies, indem es Revalidierung aus deinem eigenen Code heraus auslöst, wenn eine Änderung tatsächlich stattfindet.

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

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

Der Ablauf: Editor veröffentlicht im CMS → CMS ruft deinen Webhook auf → `revalidateTag("posts")` invalidiert den Cache → der nächste Besucher erhält neu generierten statischen HTML. Seiten bleiben statisch-schnell **und** werden sofort bei der Veröffentlichung aktualisiert.

## Nach einer Server Action Mutation

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

## Warum es wichtig ist

On-Demand-Revalidierung gibt dir das Nonplusultra: **statische Performance mit Echtzeit-Aktualität**.

Anstatt ein Revalidierungsintervall zu erraten, invalidierst du präzise, wenn sich Inhalte ändern — via Webhooks (CMS-Veröffentlichung) oder nach Server Action Mutationen — mit `revalidateTag`/`revalidatePath`.

Es eliminiert sowohl veraltete Inhalte als auch unnötige Überregenerierung und macht ISR praktisch für Inhalte, die sich unvorhersehbar ändern.