💽

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

2024/09/18に公開

はじめに

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

結論

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

使い分け

1. 動的データ

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

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

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

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

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

補足事項

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

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

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

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

rm -rf .next/cache
npm run build
npm start
GitHubで編集を提案

Discussion