Next.js มีชั้นการแคชใดบ้าง

Question

Accepted Answer

App Router มี**หลายชั้นการแคช**ที่ทำงานร่วมกัน การทำความเข้าใจเกี่ยวกับพวกเขาจะอธิบายว่าทำไมข้อมูลบางครั้งดูเหมือนล้าสมัยและวิธีควบคุมความสด

## แคชสี่ตัว

```text
1. Request Memoization — dedupes identical fetch() calls within ONE render pass
2. Data Cache          — persists fetch() results across requests & deploys (server)
3. Full Route Cache    — caches the rendered HTML/RSC of static routes (build time)
4. Router Cache        — client-side cache of visited routes (in the browser, per session)
```

## 1. Request Memoization

```tsx
// the SAME fetch in a layout AND a page → only ONE network request per render
const user = await fetch("/api/user"); // automatically deduped
```

## 2. Data Cache (อันที่คุณปรับแต่งมากที่สุด)

```tsx
fetch(url, { cache: "force-cache" });       // cached (default) — like SSG
fetch(url, { cache: "no-store" });          // never cached — fresh every request
fetch(url, { next: { revalidate: 60 } });   // cached, refreshed every 60s — ISR
fetch(url, { next: { tags: ["posts"] } });  // taggable for on-demand invalidation
```

## 3 และ 4. Route caches

**Full Route Cache** เก็บเส้นทางที่เรนเดอร์แบบคงที่ **Router Cache** เก็บเส้นทางที่เยี่ยมชมก่อนหน้านี้ในเบราว์เซอร์ เพื่อให้การย้อนกลับ/ไปข้างหน้าและการนำทางใหม่ทันที

## ยกเลิกการแคชเมื่อเกิดการเปลี่ยนแปลง

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

revalidatePath("/blog");        // invalidate a specific route's cache
revalidateTag("posts");         // invalidate every fetch tagged "posts"
router.refresh();               // (client) clear the Router Cache for current route
```

หลังจากสร้าง/อัปเดตข้อมูล (มักอยู่ใน Server Action) คุณเรียก `revalidatePath`/`revalidateTag` เพื่อให้หน้าที่ได้รับผลกระทบโหลดใหม่และผู้ใช้เห็นการเปลี่ยนแปลง

## ข้อผิดพลาดทั่วไป

```text
"Why is my data stale after an update?" → a cache (usually Data or Router cache)
is serving the old value. Fix: revalidateTag/revalidatePath after the mutation,
or use cache: "no-store" for always-fresh data.
```

(หมายเหตุ: ค่าเริ่มต้นของแคชมีการเปลี่ยนแปลงทั่วเวอร์ชัน Next — ตรวจสอบเวอร์ชันของคุณ เนื่องจากบางเวอร์ชันล่าสุดแคชอย่างน้อยก็เชิงรุกตามค่าเริ่มต้น)

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

การแคชหลายชั้นเชิงรุกของ Next.js คือสิ่งที่ทำให้มันเร็ว แต่มันยังเป็นแหล่งที่มา #1 ของความสับสน "ทำไมข้อมูลของฉันถึงเก่า"

การรู้จักชั้นทั้งสี่ควบคุม Data Cache ต่อการดึงข้อมูล (`no-store`/`revalidate`/tags) และการยกเลิก `revalidatePath`/`revalidateTag` หลังการเปลี่ยนแปลงถือเป็นสิ่งจำเป็นในการบรรลุทั้งประสิทธิภาพและความสดชื่นที่ถูกต้อง