stale-while-revalidate（SWR）というキャッシュの仕組みをしったので調べた
これまでのCache-Control, Expiresでのキャッシュの場合、有効期限を長くするとURLを変えない限り更新されなくなってしまうし、短くするとリクエストが頻繁に発生してしまいキャッシュの効果が薄れる難しさがあった
これを解決するのがstale-while-revalidate
上の記事の言葉を引用させてもらうと
キャッシュから表示するが、裏で非同期にキャッシュを更新しておく
対応状況
https://caniuse.com/?search=stale-while-revalidate
使用例
Cache-Control: max-age=600, stale-while-revalidate=300
- サーバからデータをフェッチしてから 600s 経過したキャッシュは古い状態になる
- 経過した後もそこから最大300秒間古い状態で提供され続ける
- この間、裏で非同期にフェッチを行い、サーバにキャッシュの鮮度を問い合わせる
- もしサーバから新しいリソースをフェッチしたなら、そこに付与された新しいヘッダにしたがってキャッシュを更新する
stale-if-error
stale-if-error というCache-Control 拡張もある
Cache-Control: max-age=600, stale-if-error=300
非同期にフェッチした際に、サーバの 500 やネットワークエラーにより失敗した場合は、 300秒は古い状態のキャッシュを使用する設定
ブラウザのエラー画面が表示されるのを防ぐときに使う
