Zenn
🐈

Cache(キャッシュ)ってなんだ？(今回はHTTP chachingについて)

2024/06/04に公開
http
cache
CDN
chaching
tech

HTTP Caching(キャッシュ)ってなんだ？

今回は WEB ブラウザとサーバー間でのやり取りをベースとした Caching の話をします。
web ブラウザー上でのキャッシュが意味するのは web サイトデータ、リソースをバイナリーデータで表現し、各環境のとある場所に保存されているファイルです。
HTTP Caching とは、一度訪れたサイトのリソースを各場所[1]で保存しておき、次回同じサイトに訪問した際には"キャッシュされた"サイトリソースを使ったり使わなかったりして効率的なリソースの取得を可能にする技術です。

なんでキャッシュしたいの？

  • ブラウザーにキャッシュとしてリソースを残しておくことでリクエストをする必要がなくなる(キャッシュデータを描画+利用するため)
    • クライアント側: キャッシュからリソースを取得するのでサーバーとの通信を行わなくて良い、すぐに前回のデータにアクセスできるのでレンダリングが高速
    • サーバー側: クライアント側からのリクエストが送られずに済むので、クッキーでセッションを復元したり、DB にアクセスしたり、、、などサーバー側での処理が必要がないので(キャッシュでリクエストが回避された分リクエストが送られてこないので)、サーバー側での負担も少なくなる

どうやってブラウザにキャッシュとして保存されるの？

いくつかリソースをキャッシュしておく場所の選択肢が存在しますが、今回はブラウザで。

  1. クライアントからサーバーへ欲しい web サイトのリソースをリクエスト
  2. サーバー側で「クライアントがどのようにリソースをキャッシュするか」の設定値を HTTP ヘッダーに格納
  3. サーバーからクライアントへ web サイトのリソースを送信
  4. レスポンスの HTTP ヘッダーの中でどのようにこのリソースをキャッシュするかを指定した値が設定されているかをブラウザ側で解析(キャッシュしない設定値もあります)
  5. ブラウザがリソースをキャッシュする、しない

Cache Hit vs Cache Miss

Cache Hit(キャッシュヒット)

  • 存在するキャッシュにアクセスできたこと

    • キャッシュヒットすると、リソースはブラウザに描画され、サーバーへのリクエストは投げない

Cache Miss(キャッシュミス)

  • キャッシュにアクセスせず/できずにサーバーにリソースをリクエストすること
    • キャッシュミスすると、キャッシュにリソースがない/使えるリソースがないと判断され、サーバーにリクエストを送信する

(正直 ⑤⑥ の順番が合っているかはわからない)

cache-control ~キャッシュの扱いに関するサーバーからの命令~

  • キャッシュをどのように扱うかはクライアントでは設定できません。サーバー側で設定され、レスポンスを介して命令される形でキャッシュの扱い方法は決定されます。
  • この設定値は cache-control と呼ばれるものです。
  • chache-control は HTTP レスポンスのヘッダー内に値が存在します。

chache-control の設定値一覧

  • max-age
  • s-maxage
  • no-store
  • no-cache
  • must-revalidate
  • public
  • private
  • immutable
  • stale-while-revalidate
  • stale-if-error
  • pragma(古いブラウザでしか使われていないようなので省略)
  • expires(古いブラウザでしか使われていないようなので省略)
  • vary(古いブラウザでしか使われていないようなので省略)

参照:

  1. HTTP キャッシュ (mdn web docs)
  2. Deep Dive into HTTP Caching: cache-control, no-cache, no-store, max-age, ETag and etc.

脚注

  1. 各場所: ローカル、リバースプロキシサーバー、CDN など(用途、設計によって様々) ↩︎

Discussion