キャッシュのきほん
速いのには理由がある
サーバーで取ったデータは、そのつど取り直しているとは限りません。Next.js は取得の結果をためておき、同じ取得なら使い回します。だから2回目以降の表示が速くなります。
ためておくのは便利ですが、そのままだと困る場面もあります。出品したばかりの商品が一覧に出てこない、売り切れたのに販売中のままになる。fleama で起きたら困るのはこちらのほうです。
取り直し方を書き分ける
どう扱うかは fetch の2つ目の引数で指定します。よく使うのは次の2つです。
const fresh = await fetch("/api/items", { cache: "no-store" });
const list = await fetch("/api/items", { next: { revalidate: 60 } });cache: "no-store" は「ためない」という指定です。開かれるたびに必ず取り直します。在庫や価格のように、古い値を見せてはいけないものに使います。
next: { revalidate: 60 } は「60秒たったら取り直す」という指定です。多少古くてもよいものに向いていて、アクセスが増えても取得の回数が増えません。
選び方の目安
迷ったときは、古い値が出たときに誰が困るかを考えます。
- 買おうとした商品が売り切れていた、は困るので
no-store - おすすめの並び順が1分前のまま、は困らないので
revalidate
全部を no-store にすると、せっかくの速さが消えます。逆に全部ためると、更新が反映されないアプリになります。1画面ずつ決めるのが確実です。
演習
一覧と新着で、取り直しの指定を書き分けます。