くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Cloudflareとキャッシュ

キャッシュ機能を実装するときに、いろいろ調べたので、
その時の備忘録。

Cache-Controlのディレクティブ

標準的なディレクティブは以下の通り。MDNから引用。
Cache-Control - HTTP | MDN

リクエス レスポンス
max-age max-age
max-stale -
min-fresh -
- s-maxage
no-cache no-cache
no-store no-store
no-transform no-transform
only-if-cached -
- must-revalidate
- proxy-revalidate
- must-understand
- private
- public
- immutable
- stale-while-revalidate
stale-if-error stale-if-error

利用例

キャッシュOKかどうか

# キャッシュNG
Cache-Control: no-store

# キャッシュOKだけど、検証が必要
Cache-Control: no-cache

# ブラウザなどローカルにはキャッシュしない
Cache-Control: private

# キャッシュOK
Cache-Control: public

キャッシュする時間

# N秒までキャッシュする(例: 604800秒)
Cache-Control: max-age=604800

# CDNのキャッシュ時間(例: 604800秒)
Cache-Control: s-maxage=604800

検証の有無

# 検証必須(例: 604800秒以降は再検証)
Cache-Control: max-age=604800, must-revalidate

# 裏で検証可(例: 604800秒以降で86400秒までは、古いキャッシュを返しつつ、裏で再検証)
Cache-Control: max-age=604800, stale-while-revalidate=86400

Cloudflareでの振る舞い

この記事がすごくわかりやすい。

デフォルトの動作は以下にある通り。拡張子などにより決まっている。

それ以外はページルールを利用して設定が必要。

Cache-Controlに変わり、CDN-Cache-Controlというのもあるらしい。

Etagを利用した再検証の仕組み

レスポンスにEtagを含めて返すと、
再検証時のリクエストにIf-None-Matchに渡ってくる。

Etagについてはこのあたり。

stale-while-revalidateなどを再検証が必要なディレクティブを指定していると、
If-None-MatchにキャッシュされたレスポンスのEtagの値が返ってくるので、
それをみて、キャッシュを使ってよいか判断する。


以上!!

参考にしたサイト様