On-demand revalidation (ISR) hoạt động như thế nào?

Question

Accepted Answer

**On-demand revalidation** cho phép bạn vô hiệu hóa các trang đã cache/tĩnh **đúng lúc dữ liệu thay đổi** — thay vì chờ một khoảng thời gian định trước. Nó là phần bổ trợ chính xác cho ISR theo thời gian (`revalidate: N`).

## Theo thời gian so với on-demand

```tsx
// Theo thời gian: trang làm tươi theo lịch cố định (có thể phục vụ dữ liệu cũ tới N giây)
export const revalidate = 3600; // mỗi giờ

// On-demand: làm tươi NGAY KHOẢNH KHẮC dữ liệu nền thay đổi — không chờ, không lãng phí
```

ISR theo thời gian đơn giản nhưng không hoàn hảo: quá ngắn = tái sinh không cần thiết; quá dài = nội dung cũ. On-demand sửa điều này bằng cách kích hoạt revalidation từ code của bạn khi một thay đổi thực sự xảy ra.

## Hai API on-demand

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

// 1. Gắn tag các fetch, rồi vô hiệu theo tag
await fetch("https://api/posts", { next: { tags: ["posts"] } });
revalidateTag("posts");      // làm tươi MỌI page/fetch gắn tag "posts"

// 2. Hoặc vô hiệu một path cụ thể
revalidatePath("/blog/my-post");
```

## Một quy trình thực tế: CMS webhook

```ts
// app/api/revalidate/route.ts — được CMS gọi khi một editor publish
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) {       // xác minh đúng là CMS của bạn
    return NextResponse.json({ ok: false }, { status: 401 });
  }
  revalidateTag("posts");                                // build lại các trang ảnh hưởng ngay
  return NextResponse.json({ revalidated: true });
}
```

Luồng: editor publish trong CMS → CMS gọi webhook của bạn → `revalidateTag("posts")` vô hiệu cache → khách truy cập kế tiếp nhận HTML tĩnh được tái sinh mới. Các trang vẫn nhanh kiểu tĩnh **và** cập nhật ngay khi publish.

## Sau một mutation Server Action

```tsx
"use server";
export async function createPost(data) {
  await db.post.create({ data });
  revalidateTag("posts"); // người dùng thấy bài viết mới của họ ngay lập tức
}
```

## Tại sao điều này quan trọng

On-demand revalidation cho bạn điều lý tưởng: **hiệu năng tĩnh với độ tươi thời gian thực**.

Thay vì đoán một khoảng revalidation, bạn vô hiệu hóa chính xác khi nội dung thay đổi — qua webhook (CMS publish) hoặc sau các mutation Server Action — dùng `revalidateTag`/`revalidatePath`.

Nó loại bỏ cả nội dung cũ lẫn tái sinh thừa thãi, làm cho ISR thực dụng với nội dung cập nhật bất định.