🍥
ブラウザキャッシュに混乱した話
ブラウザキャッシュの設定について、混乱したのでまとめておきます。
ブラウザキャッシュとは
HTTPキャッシュの１つ。HTTPキャッシュには以下の種類があります。
- privateキャッシュ
いわゆるブラウザキャッシュ。個々のブラウザにキャッシュされるもの。 - 共有キャッシュ
ProxyサーバーやCDNなどにキャッシュするやつ。ユーザー間で共有できるリソースのキャッシュ。ProxyサーバーやCDNの設定などによるのかも??(あまりよくわかってない。)
Cache-Controlヘッダー
HTTPヘッダーの一つである、Cache-Controlでキャッシュの挙動を設定します。リクエスト時とレスポンス時で利用できる値が少し違ったりします。↓一覧
リクエスト時
リクエストの際に、ブラウザキャッシュを使うのか or リソースへリクエストするのかの挙動を指定します。
| 設定値 | 意味 |
|---|---|
| default | キャッシュ探して、なかったら or 古かったらリクエストする。(一番自然な動き) |
| no-store | キャッシュを探さずに、リクエストする。(常に最新情報をとってきたい時) |
| no-cache | キャッシュを探して、見つかっても一旦条件付きリクエストして、リソースが変更されていなければ、キャッシュ使う。変更あれば、キャッシュを更新する。(常に最新情報をとってきたいけど、キャッシュも使いたい時) |
| force-cache | キャッシュを探して、あったら古かろうがキャッシュ使う。キャッシュがない場合は、リクエストする。(更新がないリソースの場合など) |
| only-if-cached | キャッシュを探して、あったら古かろうがキャッシュを使う。キャッシュがない場合は、リクエストせず504を返す。(いつ使うのかよくわからない？) |
レスポンス時
返したリソースをキャッシュするのか or しないのかの挙動を指定します。
また、キャッシュの有効期限もレスポンスで返します。
| 設定値 | 意味 |
|---|---|
| max-age | 有効期限。 |
| no-cache | キャッシュしていいけど、キャッシュ利用前に、変更がないか確認でリクエストしてこいよ |
| must-revalidate | キャッシュ保存していいけど、ちゃんと有効期限確認して使えよ |
| no-store | キャッシュすんな |
| private | 共有できないリソースだから個人のブラウザキャッシュだけにして |
ばかだったこと
更新があるリソースなのに、リクエスト時になぜかforce-cacheにしていた。おそらく説明を読み違えて、キャッシュを必ず先に使ってくれると言う部分だけ理解していた。まさか、古いキャッシュもそのまま使うとは理解していなかった。(ちゃんと説明読め！)キャッシュの挙動を確認していて気づけたのでよかったです。
感想
いろんなキャッシュありすぎてわからん。キャッシュで挙動変わったりするから気をつけないと！
Discussion