操作して学ぶ
HTTPキャッシュ可視化
同じファイルへの2回目・3回目のアクセスで、ネットワークに出るのか、出ないのか—— それはキャッシュの状態で決まります。初回・期限内のヒット・期限切れの再検証・サーバー側での変更の 4シナリオを切り替えて、各回で何が起き、どれだけの転送量で済むかを確かめてください。
① 初回アクセス
キャッシュは空ネットワーク
使う
転送量
フル（本体をすべてダウンロード）
キャッシュ状態
保存済み・新鮮（あと60秒）
1リクエストブラウザ → サーバー
GET /style.css
2200 OKサーバー → ブラウザ
200 OK ＋ 本体 ＋ Cache-Control: max-age=60, ETag: "v1"
3キャッシュ更新ブラウザ → キャッシュ
本体を保存（新鮮）
キャッシュに何も無いので、サーバーから丸ごと取得する。応答の Cache-Control: max-age=60 が「60秒は再確認せず使ってよい」、ETag は「この版の指紋」。ブラウザは本体と一緒にこれらを保存する。
押さえどころ
max-ageとETagは役割が違う。max-age は「N秒は聞かなくていい」という鮮度、ETag は「変わったかを聞くための指紋」。両方あると、まず鮮度で判断し、切れたら指紋で再検証、と自動で切り替わる。- 304 の価値は「本体を再送しないこと」。期限が切れても、変わっていなければサーバーはヘッダだけの 304 を返す。大きなファイルほど、この再検証の節約が効く。
no-cacheとno-storeは名前と裏腹。no-cache は「保存はするが毎回必ず再検証せよ」、no-store は「一切保存するな」。キャッシュを完全に切りたいのは no-store のほう。- 変わらないものには
immutable。ハッシュ付きファイル名（app.abc123.js）のように中身が変わらない資産は、長い max-age ＋ immutable で再検証すら省ける。更新はファイル名を変えて対応する。