Next.js có những lớp caching nào?

Question

IT Interview Practice · Accepted Answer

App Router có **nhiều lớp caching** hoạt động cùng nhau. Hiểu chúng giải thích vì sao đôi khi dữ liệu trông cũ và cách điều khiển độ tươi.

## Bốn cache

```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
// CÙNG một fetch trong một layout VÀ một page → chỉ MỘT network request mỗi lần render
const user = await fetch("/api/user"); // tự động dedupe
```

## 2. Data Cache (cái bạn tinh chỉnh nhiều nhất)

```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. Các route cache

**Full Route Cache** lưu các route render tĩnh; **Router Cache** giữ các route đã ghé trong browser để back/forward và điều hướng lại tức thì.

## Vô hiệu hóa cache khi mutation

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

revalidatePath("/blog");        // vô hiệu cache của một route cụ thể
revalidateTag("posts");         // vô hiệu mọi fetch được gắn tag "posts"
router.refresh();               // (client) xóa Router Cache cho route hiện tại
```

Sau khi tạo/cập nhật dữ liệu (thường trong một Server Action), bạn gọi `revalidatePath`/`revalidateTag` để các trang bị ảnh hưởng fetch lại và người dùng thấy thay đổi.

## Cái bẫy phổ biến

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

(Lưu ý: các mặc định cache đã thay đổi qua các phiên bản Next — kiểm tra phiên bản của bạn, vì một số phiên bản gần đây cache ít quyết liệt hơn theo mặc định.)

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

Caching đa lớp quyết liệt của Next.js là thứ làm nó nhanh, nhưng cũng là nguồn gốc số 1 của sự bối rối "tại sao dữ liệu của tôi cũ?".

Biết bốn lớp, điều khiển Data Cache theo từng fetch (`no-store`/`revalidate`/tags), và vô hiệu hóa bằng `revalidatePath`/`revalidateTag` sau mutation là thiết yếu để đạt cả hiệu năng lẫn độ tươi đúng đắn.

Bốn cache

1. Request Memoization

2. Data Cache (cái bạn tinh chỉnh nhiều nhất)

3 & 4. Các route cache

Vô hiệu hóa cache khi mutation

Cái bẫy phổ biến

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

Câu hỏi liên quan