HTTPキャッシュ

HTTPキャッシュとは

HTTPキャッシュは、一度取得したレスポンスを保存しておき、次に同じものが必要になったときに再利用する仕組みです。通信そのものをなくせるため、表示速度の改善とサーバー負荷の削減を同時に実現できます。

[[HTTP]] の仕様として最初から組み込まれており、サーバーが返すレスポンスヘッダで「どれくらい保存してよいか」を指示します。ブラウザや [[CDN]] はその指示に従って動きます。

キャッシュが置かれる場所は主に2つです。プライベートキャッシュ(利用者のブラウザ内。その人だけが使う)と、共有キャッシュ(CDN や [[リバースプロキシ]]。全利用者で共通)です。

ログイン後のページなど個人向けの内容を共有キャッシュに置くと、他人に見えてしまう事故になります。この区別は必ず意識してください。

Cache-Control ヘッダ

挙動を決める中心が Cache-Control です。

Cache-Control: public, max-age=31536000, immutable

主な指定は次のとおりです。

指定	意味
`max-age=秒`	この秒数のあいだは再取得せずそのまま使ってよい
`public`	共有キャッシュに保存してよい
`private`	ブラウザだけに保存してよい(CDN等は不可)
`no-cache`	保存はするが、使う前に必ずサーバーへ確認する
`no-store`	一切保存しない(個人情報や決済画面向け)

紛らわしいのが no-cache と no-store です。no-cache は「保存禁止」ではありません。保存はしたうえで、使う前に毎回確認するという意味です。本当に保存させたくないときは no-store を使います。

検証(条件付きリクエスト)

max-age が切れても、中身が変わっていなければ再ダウンロードは無駄です。そこで検証の仕組みがあります。サーバーが ETag: "abc123"(内容の指紋)を付けて返し、次回ブラウザは If-None-Match: "abc123" を添えて問い合わせます。変わっていなければサーバーは 304 Not Modified を返し、本体データを送りません。

304 なら往復1回で済むため、完全なキャッシュヒットには劣るものの、大きなファイルほど効果的です。同じ3xxでもリダイレクトとは性格が違う点は [[HTTPステータスコード]] で整理しています。

実務での定番パターン

ファイル名にハッシュを入れる — app.a1b2c3.js のようにビルド時のハッシュを付け、max-age=31536000, immutable で1年キャッシュさせます。内容が変わればファイル名も変わるので、古いものが残る心配がありません
HTML は毎回検証 — エントリになる HTML は no-cache にして常に最新を取りに行かせます。ここが古いままだと、新しい JS ファイルを指してくれません
API レスポンスは慎重に — 更新頻度が高いデータは no-store か短い max-age にします

この「HTML は検証、静的アセットは長期キャッシュ」の組み合わせが、[[Webパフォーマンス最適化]] における鉄板の構成です。

初学者向けポイント

「修正したのに反映されない」の多くはキャッシュが原因です。まずスーパーリロード(Ctrl+Shift+R)で切り分けましょう
ブラウザの開発者ツールの Network タブで、Size 列が (disk cache) や 304 になっていればキャッシュが効いています
サーバー側のデータ保存を指す [[キャッシュ戦略]] とは層が違います。HTTP キャッシュは通信そのものを省く点が特徴です

関連技術とのつながり

[[HTTP]] — キャッシュ制御はHTTPヘッダの機能として定義されている
[[CDN]] — 共有キャッシュの代表。Cache-Control の指示に従って配信する
[[キャッシュ戦略]] — アプリケーション側のキャッシュ。役割の異なる層として併用する
[[リバースプロキシ]] — サーバー前段に置く共有キャッシュとして働く
[[Webパフォーマンス最適化]] — 表示速度改善の中でも効果が大きい施策

Q: `Cache-Control: no-cache` の正しい意味はどれ?
- [ ] 一切保存してはいけない
- [x] 保存はするが、使う前に毎回サーバーへ確認する
- [ ] 1年間そのまま使ってよい
解説: 完全に保存させないのは `no-store` です。`no-cache` は保存したうえで毎回検証させる指定です。

Q: 内容が変わっていないときにサーバーが返すステータスコードはどれ?
- [ ] 200 OK
- [x] 304 Not Modified
- [ ] 404 Not Found
解説: ETag などによる検証で変更がなければ304を返し、本体データの転送を省けます。

Q: ログイン後の個人向けページを共有キャッシュに保存させないための指定はどれ?
- [x] private(または no-store)
- [ ] public
- [ ] max-age=31536000
解説: publicはCDN等の共有キャッシュへの保存を許可してしまいます。個人向けの内容は private か no-store を指定します。