การตรวจสอบความถูกต้องตามต้องการ (ISR) ทำงานอย่างไร

Question

Accepted Answer

**การตรวจสอบความถูกต้องตามต้องการ** ช่วยให้คุณ **ยกเลิกหน้าที่เก็บในแคชหรือหน้าแบบสแตติกพอดีเมื่อข้อมูลเปลี่ยนแปลง** — แทนที่จะรอช่วงเวลาตามเวลา นี่คือส่วนเติมเต็มที่แน่นอนสำหรับ ISR ตามเวลา (`revalidate: N`).

## ตามเวลา vs ตามต้องการ

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

ISR ตามเวลาเป็นเรื่องง่าย แต่ไม่สมบูรณ์: สั้นเกินไป = การสร้างใหม่ที่ไม่จำเป็น; ยาวเกินไป = เนื้อหาเก่า การตามต้องการแก้ไขสิ่งนี้โดยการทริกเกอร์การตรวจสอบความถูกต้องจากโค้ดของคุณเองเมื่อมีการเปลี่ยนแปลงจริง

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

## เวิร์กโฟลว์จริง: webhook ของ CMS

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

การไหลของข้อมูล: บรรณาธิการเผยแพร่ใน CMS → CMS เรียก webhook ของคุณ → `revalidateTag("posts")` ยกเลิกแคช → ผู้เยี่ยมชมคนถัดไปได้รับ HTML แบบสแตติกที่สร้างใหม่ เพจอยู่แบบสแตติก-เร็ว **และ** อัปเดตทันทีในการเผยแพร่

## หลังจากการกลายพันธุ์ Server Action

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

## ทำไมมันถึงสำคัญ

การตรวจสอบความถูกต้องตามต้องการให้คุณซื้อแก้ว: **ประสิทธิภาพแบบสแตติกพร้อมความสดใหม่แบบเรียลไทม์**.

แทนที่จะเดาช่วงเวลาการตรวจสอบความถูกต้อง คุณจะยกเลิกพอดีเมื่อเนื้อหาเปลี่ยนแปลง — ผ่าน webhooks (การเผยแพร่ CMS) หรือหลังจากการกลายพันธุ์ Server Action — โดยใช้ `revalidateTag`/`revalidatePath`.

มันกำจัดทั้งเนื้อหาเก่าและการสร้างใหม่ที่เสียสูญ ทำให้ ISR ปฏิบัติได้กับเนื้อหาที่อัปเดตอย่างคาดไม่ได้