BuriKaigi2025

Practical HTTP Caching For Web Developers araya 
 2025-02-01 BuriKaigi 2025

araya BuriKaigi 初参加 bsky.app/profile/araya.dev
 x.com/arayaryoma github.com/arayaryoma

HTTP cachingの基本的なプロトコル RFC9111と関連仕様の基本的な一部

HTTP request GET /articles HTTP response 最もシンプルなHTTP cachingの例 保存 200 cache-control: max-age=60 clientはserverにHTTP requestを送り serverはresponseを返し 60秒以内 clientはそのresponseをcacheする HTTP requestの送信を省略 再利用 GET /articles

HTTP request GET /articles “cacheする” HTTP response 保存 200 cache-control: max-age=60 60秒以内 request をkeyに request を解決するために responseを保存する responseを再利用する HTTP requestの送信を省略 再利用 GET /articles

GET /articles ✘ 保存しない “cacheしない” 200 cache-control: no-store serveはclientに”responseを保存してはならない” ことを指示する GET /articles 200 cache-control: no-store

GET /articles W/”abc123” 再利用可能性の検証(validation) 保存 200 cache-control: max-age=600 etag: W/”abc123” max-ageで指定された期限を過ぎたstale cache も、 60秒以上経過 古いけどcacheある これ使っていい？ GET /articles if-none-match: W/”abc123” 再利用 304 Not Modified どうぞ

example.comの例

GET /articles GET /articles 200 client-intermediary-server browserとserverの間には、CDNやproxyなどの 中間者がいることもある 中間者はclientとしてもserverとしても振る舞う cacheがpublicであれば、shared cacheとして 振る舞う中間者も保存・再利用可能 200 GET /articles W/”abc123” 保存/再利用 200 cache-control: max-age=600 etag: W/”abc123”

保存 GET /me cookie: token=xyz 保存 public / private 200
 cache-control: private, max-age=5 GET /me cookie: token=abc 200
 cache-control: private, max-age=5 shared cacheには保存できないがbrowserでは 保存/再利用できるケースもある GET /me cookie: token=xyz private cacheは保存しない 200
 cache-control: private, max-age=5 GET /me cookie: token=abc 200
 cache-control: private, max-age=5

重要なキーワード 保存と再利用 freshとstale publicとprivate validation “cacheする” は保存して再利用すること
 ”no-cache” は保存もされるし再利用もされ うる “個人情報” ≠ “cacheできない”
 どこで保存され、どの範囲で再利用されうる かを意識する lifetimeを終えたcacheはstaleとなり即削除され るわけではない
 staleになったcacheの再利用性もコントロール 可能 conditional requestによりserverはstatus codeでstaleなcacheの再利用可能性を示す

プロダクトの性質に合わせた caching

例: 誰でも同じ記事が読める
 ニュースメディア 常に最新の記事一覧を取得してほしいから no-cache 回遊の体験を限りなく良くしたいから max-age=60 ? Toyama Buri News 富山湾のブリ大豊漁！
 新開発の“光る定置網”が効果絶大 昨シーズンは不漁が続いていた富山湾で、ついにブリの大群 が戻ってきました。今年から導入された“光る定置網”が漁獲 量を大きく伸ばした要因だとされ、地元の漁師たちは歓喜に 包まれています。専門家は「光に集まるブリの習性をうまく 利用した新技術が功を奏した」と分析しています。 富山県立水族館に“ブリの王国”
 特別展示がオープン 2025-02-01 映画『帰ってきたブリ』の制作 発表会、富山市内で開催 2025-02-01 2025-02-01 富山の新名物“ブリロールサン ド”が爆発的人気に 2025-02-01 県内初！“ブリ・スマート養殖 場”がAIで稼働開始 2025-02-01 *記事はすべて ChatGPT o1製

例: ニュースメディア (ログイン付き) araya Toyama Buri News ロ グアウト 富山湾のブリ大豊漁！
 新開発の“光る定置網”が効果絶大 ユーザーの情報を含むので private, max-age=60 昨シーズンは不漁が続いていた富山湾で、ついにブリの大群 が戻ってきました。今年から導入された“光る定置網”が漁獲 量を大きく伸ばした要因だとされ、地元の漁師たちは歓喜に 包まれています。専門家は「光に集まるブリの習性をうまく 利用した新技術が功を奏した」と分析しています。 2025-02-01 毎回validationを実行させて
 server-sideでユーザーを検証するために no-cache ユーザー固有情報を含めないresponseを max-age=60 
 で返しclient-sideからユーザー情報のみをfetchする ? 富山県立水族館に“ブリの王国”
 富山の新名物“ブリロールサン 特別展示がオープン ド”が爆発的人気に 2025-02-01 2025-02-01 映画『帰ってきたブリ』の制作 県内初！“ブリ・スマート養殖 発表会、富山市内で開催 場”がAIで稼働開始 2025-02-01 2025-02-01 *記事はすべて ChatGPT o1製

例: ログインしないと使えない
 業務用ダッシュボード(SPA) navigation requestはno-cache API requestのGET系は すべてのrequestはno-storeにしなければいけない...？

cacheの混在と分離

GET /me cookie: token=xyz “cache事故” 200
 cache-control: max-age=5 GET /me cookie: token=abc Aさんだけに送りたいresponseをshared cache に保存させてしまい、 Bさんからのrequestに対してshared cacheがA さん用のresponseを返す 200
 cache-control: max-age=5 GET /me cookie: token=abc ※特定の実際の組織や出来事を想定しているわけではないです 200
 cache-control: max-age=5 保存/再利用

深刻度 高 ユーザーの個人情報を含むレスポンスを別のユーザーに返す => 個人情報の漏洩 br,gzip,deflateしか解釈できないクライアントにzstdで圧縮したresponseを返す => サービスレベルの低下 英語設定のユーザーに日本語のレスポンスを返す => ユーザビリティの低下

GET /articles accept-language: ja vary response 
 header field 200
 content-language: en-US GET /articles accept-language: en 200
 content-language: ja-JP GET /articles accept-language: en http request field ベースでresponseをタグ付け accept-language=en 200
 cache-control: s-max-age=60 vary: accept-language content-language: en-US 保存/再利用 GET /articles accept-language: ja accept-language=ja 200
 cache-control: s-max-age=60 vary: accept-language content-language: ja-JP

GET /me cookie: token=xyz `vary: cookie` 200 cache-control: no-cache GET /me cookie: token=abc vary: cookie をresponseにつければcache混在 問題は回避可能 ただ、認証に関係ないcookieでもcacheが分割 されてしまう => Tips: CDNレイヤーでcookieからheader field に変換する 200
 cache-control: no-cache GET /me x-session-token: abc 保存/再利用 200
 cache-control: s-max-age=60 vary: x-session-token 200
 cache-control: s-max-age=60 vary: x-session-token GET /me x-session-token: xyz

仕様の理解 private/publicの違いやno-store/no-cacheの違い、varyについ て理解する “cache事故” を防ぐために アプリケーション実装上の規約 リソースごとにどこでどのくらいの期間cache可能かを判断して制御可能にす request headerを読み取ったら強制的にvaryにheaderを加える など CDN service特性の理解 多くのCDN serviceはcache-controlとは別にCDN側の設定を 持つ それらが組み合わさったときにどう動くかを理解する CDNのドキュメントを読み推奨設定を前提としてcachecontrolを送る

フレームワークのAPI 現代のWebアプリケーションフレームワークをいくつかキャッチアップ HTTP cachingについてどのようなAPIを提供しているか

ASP.NET Core

Program.cs Serviceの登録 まずHTTP cachingを有効にするために response caching serviceを追加して、 UseResponseCachingを呼び出す

HomeController.cs Controllerで属性を指定 ResponseCache属性でcontrollerごとに指 定できる cache-control のdirectiveをプロパティ で抽象化

ResponseCacheLocation.cs Location enum Location.Noneはno-storeではなくno-cache no-storeにしたい場合は NoStore=true をプ ロパティで指定する

ResponseCacheLocation.cs Location enum Location.Noneはno-storeではなくno-cache no-storeにしたい場合は NoStore=true をプ ロパティで指定する

Ruby on Rails

GET /articles W/foobar validation重視 保存 200 cache-control: max-age=0, private, must-revalidate etag: W/"123abc" Railsはno-cacheとEtagを送り、clientに validationをさせるのを重視している 
 JS, CSSなどの静的なリソースはハッシュ付きの ファイル名にして immutable cahe GET /articles if-none-match: W/”123abc” 再利用 304 Not Modified

サーバーサイドでのcache cacheのfreshnessを細かく制御するのではな く、validation requestを遅らせてサーバーサイド の計算を速くするためにサーバーサイドのcache を制御するAPIが充実している この例のfragment cacheの他にも、templateの 一部やDBへのqueryの結果をcacheするための APIがある

Next.js (AppRouter) v15.1.5 cache周りは過渡期のため今後大きく変わる可能性あり

static routes Next.jsは最適化のためにbuild時に極力 staticなpageになるように解決する ただの fetch だけではstatic扱い。 共有キャッシュがfreshなうちは araya.dev/ foo.htmlの結果が変わってもresponseには 反映されない cache-control: s-maxage=31536000

dynamic routes cookieの取得など、requestのたびに結果が変 わりうるものについてはdynamicなものとして 扱う 色々ついてるが(現代においては) no-store 以 外をつける意味はない cache-control: private, no-cache, no-store, max-age=0, must-revalidate


export const dynamic = ... Next.js はファイルシステムベースのルーティン グ機構を持っている 各routerを表すfileから dynamic objectを exportして強制的にstatic | dynamicを切り替え ることができる cache-control: private, no-cache, no-store, max-age=0, must-revalidate


cache-control, vary の関連資料 private/publicの違いやno-store/no-cacheの違い、varyについ て理解する Webアプリケーション
 開発者が知るべきこと 利用しているフレームワークが内部的に何を送っている か フレームワークはHTTP cachingのコントロールを抽象化していたり暗黙的な挙 動を持ってい CDN service特性の理解 多くのCDN serviceはcache-controlとは別にCDN側の設定を 持つ それらが組み合わさったときにどう動くかを理解する CDNのドキュメントを読み推奨設定を前提としてcachecontrolを送る s-maxageやcdn-cache-controlのサポート状況について知 る