フロントエンドにおけるキャッシュについてまとめてみた

キャッシュって何？

揮発性のあるデータもしくは、そのデータを一時的に保存して高速なアクセスを可能にする仕組みを指します。

キャッシュは様々な場所に存在します。

• ブラウザ：Webページや画像を保存して、次回の表示を速くする
• DNS：ドメインとIPの対応を覚えておき、通信を速くする
• サーバー：データベースの結果を一時保存して、サーバーの負荷を減らす
• CPUやディスク：計算やデータ読み込みを速くする

この中でも今回は、フロントエンドに関わるキャッシュを中心にまとめます。

ブラウザキャッシュ

「ブラウザキャッシュ」は、サーバーから受け取ったレスポンスをローカルに保存して、次回はそれを再利用する仕組みです。

• 対象
  • HTML / CSS / JS / 画像などの表示データ
• メリット
  • 通信量を減らせる
  • 表示速度が速くなる
• デメリット
  • 古いキャッシュを利用してしまい、情報の信頼性が下がる可能性がある

HTTPにおけるキャッシュ

ブラウザは「勝手に」キャッシュするわけではなく、サーバーが「レスポンスヘッダ」でキャッシュの可否や有効期限を指示します。

主なレスポンスヘッダ

• Cache-Control: キャッシュに関する複雑な指示ができる
  • max-age → キャッシュ有効期限（例: max-age=600 → 10分間はキャッシュを利用する）
  • no-cache → キャッシュの保存・利用可能だが、利用前にサーバーに最新かどうか確認が必要
  • no-store → キャッシュ禁止
• Expires: 有効期限
  • 「この日時まで有効」と絶対時間で指定
  • HTTP/1.1以降は Cache-Control が優先される
• Pragma: キャッシュ可否
  • 例: Pragma: no-cache
  • HTTP1.1以降はCache-Controlが主流なので使われない

また、条件付きリクエストを行うことも可能です。

• If-Modified-Since / Last-Modified
  • リクエストヘッダ: If-Modified-Since
  • サーバー側が返す情報: Last-Modified
    • ブラウザが「前回受け取った更新日時」を送って、サーバーの更新日時と比較
    • 更新されていれば、200 OK と新しいデータを返す
    • 更新されていなければ 304 (Not Modified) を返す
• If-None-Match / ETag
  • リクエストヘッダ: If-None-Match
  • サーバー側が返す情報: ETag
    • サーバーが返す一意の文字列（ETag）で変更有無を確認
    • 一致すれば 304 (Not Modified) 、不一致なら新しいリソースを返す

CDNキャッシュ

ブラウザの外側にあるキャッシュで、サーバーに到達する前のCDNサーバーでデータを保持する仕組みです。

CDNサーバーとは

• Content Delivery Networkの略で、Webサイトのコンテンツを世界中に分散配置し、ユーザーに近い場所から配信する仕組み
• ブラウザがサーバーに直接アクセスする代わりに、最寄りのCDNサーバーからキャッシュされたデータを受け取るため、表示が速くなる
• 例：Cloudflare, Amazon CloudFront, Akamai など

💡キャッシュの分散
サイトによっては複数のCDNサーバーやキャッシュサーバーが存在します。
その場合、サーバーごとにキャッシュの状態が異なり、一部のユーザーだけ古いデータが表示されることもあります。
これを防ぐためにキャッシュの更新タイミングを揃えたり、キャッシュを一括削除する運用が必要です。

サーバー側のキャッシュ

キャッシュはブラウザだけでなく、サーバー側でも利用されています。
サーバーで一度取得・計算した結果を一時的に保存し、次のリクエストでは再計算せずに返すことで、データベースや外部APIへの負荷を減らす仕組みを サーバーサイドキャッシュ と呼びます。

サーバーサイドキャッシュでよく使われる仕組み

• Redis
  • メモリ上で動く高速なデータベース
  • 複雑なデータ構造を扱える
  • キャッシュ以外にも、セッション管理やランキング集計、キュー処理など幅広く利用される
• Memcached
  • メモリ上で動くキャッシュ専用サーバー
  • シンプルなキーと値のみを扱う軽量設計
  • 主にデータベースのクエリ結果などを一時保存して再利用する目的で使われる

注意点・知っておきたいこと

💥 キャッシュのリスク

• 古い情報が残る
  • キャッシュが有効な間はサーバーの更新がすぐ反映されないことがある
    • 保存と削除（または更新）をセットで設計する
• セキュリティリスク
  • 認証情報や個人データをキャッシュに含めない
  • 不正なデータをキャッシュさせるキャッシュポイズニングなどの攻撃にも注意する

⚖️ キャッシュ運用のポイント

• メリットとデメリットを意識する
  • 更新頻度が高いデータや最新性が重要な情報は、キャッシュの利点よりリスクが大きいこともある
    • 「速さ」と「正確さ（最新性）」のバランスを取ることが大切
• キャッシュヒット率の最適化
  • キャッシュヒット率とは、キャッシュが利用された割合のこと
  • 高すぎると古い情報が残りやすく、低すぎるとキャッシュの意味がなくなる
    • メモリを圧迫することもあるため、不要なデータを溜めすぎない設計を意識する
• キャッシュウォームアップ
  • 新規リリースやキャッシュ削除直後はキャッシュが空で、最初のアクセスが遅くなる
  • 事前に主要ページを読み込んでキャッシュを作成（ウォームアップ）することで、初回遅延を防げる