💽
[Next.js] fetch関数で取得したデータをキャッシュにしない
はじめに
Next.js
の学習の為に、下記書籍を読みました。
下記書籍のキャッシュ
について学びがあったので、執筆します。
結論
キャッシュとは、
Webページや画像、スクリプトなどのコンテンツを一時的に保存する仕組みです。
これにより、同じページに再度アクセスするときにサーバーにリクエストを送ることなく、
素早くコンテンツを表示することができます。
使い分け
1. 動的データ
例えば、下記項目のような変更が多いデータに対して有効
- 閲覧履歴
- 商品在庫数
2. 静的データ(キャッシュ)
例えば、下記項目のような変更が少ないデータに対して有効
- 商品概要
- ブログ記事
- ニュース記事
補足事項
1. 初期値は、キャッシュになる
fetch(`http://...`);
2. npm run dev で動作確認しない
下記コマンドならキャッシュを一度削除すれば、挙動を確認できる
rm -rf .next/cache
npm run build
npm start
Discussion