TL;DR
古くなったキャッシュをすぐに返しつつ、バックグラウンドで新しい内容を取りに行ってキャッシュを更新する仕組み。HTTP では Cache-Control ヘッダの stale-while-revalidate ディレクティブとして、RFC 5861 で定義されている。
なぜ必要か
キャッシュをすぐに返す速さと、更新された内容を使う新しさを両立できる。
仕組み
max-age の期間内は、キャッシュを新鮮なものとしてそのまま使う。max-age を過ぎても stale-while-revalidate で指定した期間内であれば、古いキャッシュを返しながらバックグラウンドで再検証する。その期間も過ぎると、ネットワークからの応答を待つ。
例
Cache-Control: max-age=1, stale-while-revalidate=59この場合、0〜1 秒はキャッシュをそのまま使う。1〜60 秒は古いキャッシュを返し、裏でキャッシュを更新する。60 秒を過ぎるとネットワークから取得する。
Next.js の Time-based Revalidation や next/image の画像キャッシュも、この挙動になる。
注意点
stale-while-revalidate に対応していないブラウザは、このディレクティブを無視する。その場合も max-age は効く。