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

はじめに

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

結論

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

ts

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

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

使い分け

1. 動的データ

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

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

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

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

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

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

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

補足事項

1. 初期値は、キャッシュになる

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

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

2. npm run dev で動作確認しない

npm run dev でのアプリ起動では、正しい挙動をしない可能性がある

下記コマンドならキャッシュを一度削除すれば、挙動を確認できる

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

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣