キャッシュのきほん

速いのには理由がある

サーバーで取ったデータは、そのつど取り直しているとは限りません。Next.js は取得の結果をためておき、同じ取得なら使い回します。だから2回目以降の表示が速くなります。

ためておくのは便利ですが、そのままだと困る場面もあります。出品したばかりの商品が一覧に出てこない、売り切れたのに販売中のままになる。fleama で起きたら困るのはこちらのほうです。

取り直し方を書き分ける

どう扱うかは fetch の2つ目の引数で指定します。よく使うのは次の2つです。

cache: "no-store" は「ためない」という指定です。開かれるたびに必ず取り直します。在庫や価格のように、古い値を見せてはいけないものに使います。

next: { revalidate: 60 } は「60秒たったら取り直す」という指定です。多少古くてもよいものに向いていて、アクセスが増えても取得の回数が増えません。

選び方の目安

迷ったときは、古い値が出たときに誰が困るかを考えます。

• 買おうとした商品が売り切れていた、は困るので no-store
• おすすめの並び順が1分前のまま、は困らないので revalidate

全部を no-store にすると、せっかくの速さが消えます。逆に全部ためると、更新が反映されないアプリになります。1画面ずつ決めるのが確実です。

演習

一覧と新着で、取り直しの指定を書き分けます。