Kuinka on-demand-revalidointi (ISR) toimii?

Question

Accepted Answer

**On-demand-revalidointi** antaa sinulle mahdollisuuden mitätöidä välimuistiin tallennetut/staattiset sivut **täsmälleen silloin, kun data muuttuu** — sen sijaan että odottaisit aikaväliä. Se on aika-pohjaisen ISR:n (`revalidate: N`) täydellinen vastakohta.

## Aika-pohjainen 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
```

Aika-pohjainen ISR on yksinkertainen mutta epätäydellinen: liian lyhyt väli = turhaa regenerointia; liian pitkä väli = vanhentunutta sisältöä. On-demand korjaa tämän laukaisemalla revalidoinnin omasta koodistasi silloin, kun muutos todella tapahtuu.

## Kaksi on-demand-ohjelmointirajapintaa

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

## Todellinen työnkulku: 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 });
}
```

Virtaus: toimittaja julkaisee CMS:ssä → CMS kutsuu webhook-kutsuasi → `revalidateTag("posts")` mitätöi välimuistin → seuraava vierailija saa tuoreesti regeneroitua staatittista HTML:ää. Sivut pysyvät staatittisen nopeiden **ja** päivittyvät välittömästi julkaisun yhteydessä.

## Server Action -muutoksen jälkeen

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

## Miksi se on tärkeää

On-demand-revalidointi antaa sinulle pyhän graalia: **staatittisen suorituskyvyn reaaliaikaisen tuoreuden kanssa**.

Sen sijaan että arvailisit revalidointiväliä, mitätöit sisällön täsmälleen silloin, kun se muuttuu — webhookkien (CMS-julkaisu) tai Server Action -mutaatioiden kautta — käyttämällä `revalidateTag`/`revalidatePath`.

Se poistaa sekä vanhentuneen sisällön että turhaa yliregenerointia, jolloin ISR:stä tulee käytännöllinen sisällölle, joka päivittyy arvaamattomasti.