Next.js 中有哪些缓存层？

Question

Next.js 中有哪些缓存层？

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 缓存

**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 的侵略性多层缓存正是使其快速的原因，但它也是