Hogyan működik az igény szerinti revalidáció (ISR)?

Question

Accepted Answer

**Az igény szerinti revalidáció** lehetővé teszi a cached/statikus oldalak érvénytelenítését **pontosan akkor, amikor az adatok megváltoznak** — ahelyett, hogy egy időalapú intervallumra várnál. Ez a pontos kiegészítése az időalapú ISR-nek (`revalidate: N`).

## Időalapú vs igény szerinti

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

Az időalapú ISR egyszerű, de nem tökéletes: túl rövid = szükségtelen újragenerálás; túl hosszú = elavult tartalom. Az igény szerinti revalidáció ezt úgy oldja meg, hogy az átalakítást a saját kódodból indítod el, amikor valójában változás történik.

## A két igény szerinti API

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

## Valós munkafolyamat: 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 });
}
```

A folyamat: a szerkesztő közzétesz a CMS-ben → a CMS meghívja a webhookod → `revalidateTag("posts")` érvénytelenít a cachét → a következő felhasználó frissen újragenerált statikus HTML-t kap. Az oldalak statikus sebességgel maradnak **és** azonnal frissülnek közzétételkor.

## A Server Action mutáció után

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

## Miért számít

Az igény szerinti revalidáció adja meg a végső célt: **statikus teljesítmény valós idejű frissességgel**.

Ahelyett, hogy egy revalidációs intervallumra tipelnél, pontosan akkor érvénytelenítesz, amikor a tartalom változik — webhookokkal (CMS közzétételezés) vagy Server Action mutációk után — `revalidateTag`/`revalidatePath` használatával.

Eliminálódik mind az elavult tartalom, mind a pazarló felülül-újragenerálás, így az ISR gyakorlatiasá válik az előre nem látható módon frissülő tartalom esetén.