IT-Q

Server Component の中の fetch は、既定でキャッシュされますか。

されません。ただし静的に作られるページでは、ビルド時に1回取得した結果がページに焼き込まれます。App Router の初期は既定でキャッシュする仕様で、古い記事は逆の説明です。

面接官が見ているのは🔴 バージョンで変わった箇所。古い知識で答えると「2〜3年前で止まっている」と見られる。

よくある答えと、面談でどう見られるか

  • されない。したい場合は cache 指定や "use cache" で明示する
    App Router 初期は既定でキャッシュしていたので、そこが変わった箇所です。
  • される。不要なら no-store を指定する
    それは 13〜14 系の挙動です。現在は既定でキャッシュされません。
  • 静的レンダリングならキャッシュされ、動的ならされない
    実際の見え方としては正しいです。fetch 自体はキャッシュしませんが、静的に作られるページではビルド時に1回取得した結果がページに焼き込まれます。2つの仕組みが重なっていると説明できると強いです。
  • 同一リクエスト内では再利用されるが、リクエストをまたぐと再取得される
    前半はメモ化の説明として正しいのですが、キャッシュとは別の仕組みです。

模範解答

既定ではキャッシュされません。公式は「fetch リクエストは既定でキャッシュされず、完了するまでページの描画をブロックする」と書いています。

ここはバージョンで変わった箇所です。App Router の初期(13〜14)は既定でキャッシュされる仕様で、「勝手にキャッシュされて古いデータが出る」という声が多く出ました。その後、既定はキャッシュしない方向に変わりました。

ただし落とし穴があります。従来の設定(Cache Components を有効にしていない場合)では、fetch 自体はキャッシュしなくても、そのページが静的にプリレンダーされるなら、fetch はビルド時に1回だけ実行され、結果がページに焼き込まれます。cookies() のようなリクエスト時の API を使っていればリクエストごとに取得します。「キャッシュしていないのに古い」は、たいていこれです。

キャッシュしたい場合は fetch(url, { cache: 'force-cache' }) のように明示するか、"use cache" ディレクティブを使います。"use cache" は Cache Components(next.config の cacheComponents: true。16.4 で新規作成したアプリでは既定で有効)の機能です。

なお、同じ fetch がコンポーネントツリー内で重複した場合は既定でメモ化されるので、props で引き回さずに必要な場所で取って構いません。これはキャッシュとは別の仕組みです。

対象: Next.js 16(App Router) 照合した一次資料: 公式ドキュメント 照合: 2026-10-25 最終更新: 2026-10-25
お使いの版で挙動が違う場合があります。誤りに気づいたらこの解説を報告するから教えてください。