Next.js にはどのようなキャッシング層がありますか?

Question

Accepted Answer

App Router には**複数のキャッシング層**があり、一緒に機能します。それらを理解することで、データが古く見える理由と鮮度を制御する方法が説明されます。

## 4 つのキャッシュ

```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 の積極的なマルチ層キャッシングはそれを高速にする理由ですが、「なぜデータが古いのですか？」という混乱の#1の原因でもあります。

4 つの層を知ること、fetch ごとに Data Cache を制御すること（`no-store`/`revalidate`/tags）、およびミューテーション後に `revalidatePath`/`revalidateTag` で無効化することは、パフォーマンスと正しい鮮度の両方を得るために必須です。