[Next.js] fetch関数で取得したデータをキャッシュしない

🌱 はじめに

Next.jsの学習の為に、下記書籍を読みました。
下記書籍のキャッシュについて学びがあったので、執筆します。

本記事は、書籍が対象としている Next.js 14 の App Router、かつサーバーコンポーネント内の fetch を前提にしています。
Next.js 15 以降は fetch の既定値が変わっているため、「補足事項」もあわせて確認してください。

🌱 結論

fetch 関数のオプションに { cache: 'no-store' } を追加する

- fetch(`http://...`);
+ fetch(`http://...`, { cache: 'no-store' });

キャッシュとは、
Web ページや画像、スクリプトなどのコンテンツを一時的に保存する仕組みです。
これにより、同じページに再度アクセスするときにサーバーにリクエストを送ることなく、
素早くコンテンツを表示することができます。

Next.js（App Router）の場合は、サーバー側で fetch の結果を保存し（Data Cache）、以降のリクエストやビルドで再利用します。
{ cache: 'no-store' } を指定すると、リクエストのたびにデータを取得し直します。

オプションの有無で fetch の流れがどう変わるかを図にすると、次のようになります（Next.js 14 の場合）。

🌱 使い分け

1. 動的データ

{ cache: 'no-store' } のオプションを追加する

例えば、下記項目のような変更が多いデータに対して有効

1. 閲覧履歴
2. 商品在庫数

2. 静的データ(キャッシュ)

{ cache: 'no-store' } のオプションを追加しない

例えば、下記項目のような変更が少ないデータに対して有効

1. 商品概要
2. ブログ記事
3. ニュース記事

なお、一定間隔で更新したいデータは、next: { revalidate: 60 } のように再検証する間隔（秒）を指定する方法もあります。

🌱 補足事項

1. 初期値は、キャッシュされる（Next.js 14 まで）

Next.js 14 までは、fetch 関数でオプションを指定しなければ、静的データ(キャッシュ)となる

fetch(`http://...`);

Next.js 15 以降は既定値が変わり、オプションを指定しない fetch の結果はキャッシュされません。
15 以降でキャッシュしたい場合は、{ cache: 'force-cache' } を明示します。

2. npm run dev では正しく動作確認できない

開発モード（npm run dev）ではページがリクエストのたびにレンダリングされるため、本番のキャッシュの挙動を再現できない

ビルド時にも以前取得した fetch の結果が再利用されるため、下記コマンドでキャッシュを削除してからビルド・起動すれば、挙動を確認できる

rm -rf .next/cache
npm run build
npm start