Reactアプリのエッジキャッシュ戦略

Cache-Controlレスポンスヘッダーは、CloudflareなどのCDNがSSRレスポンスをキャッシュする期間を制御します。主なディレクティブは、max-age（ブラウザーキャッシュ）、s-maxage（CDNなどの共有キャッシュの保持期間）、stale-while-revalidate（バックグラウンドで再検証している間、古いコンテンツを提供）です。

s-maxageは共有キャッシュ（CDN）で使用され、max-ageはブラウザーキャッシュ用です。SSRページでは通常、s-maxage=60（CDNが60秒間キャッシュ）とmax-age=0（ブラウザーは常に再検証）を設定します。これにより、すべてのユーザーがエッジキャッシュから適度に新しいコンテンツを受け取れます。

Cache-Controlヘッダーにstale-while-revalidate=30を追加すると、Cloudflareはキャッシュ済みのページを即座に提供しながら、バックグラウンドで新しいバージョンを取得します。ユーザーは常に高速なレスポンスを受け取れ、古い状態が続く最大時間はs-maxage + stale-while-revalidate秒です。

ユーザーセッションやロケールに基づくパーソナライズされたコンテンツは、共有キャッシュから別のユーザーに誤って提供されてはいけません。Vary: Cookieヘッダーを指定すると、CloudflareはCookieの値ごとに個別のキャッシュエントリとして扱います。これにより、あるユーザーのデータが別のユーザーに提供されるのを防げます。

一般的なパターンでは、キャッシュを使用するかどうかを決める前に、WorkerでセッションCookieの有無を確認します。セッションCookieが存在する場合はキャッシュを完全にバイパスし、パーソナライズされたレスポンスをレンダリングします。セッションCookieがなければ、そのページは公開ページなのでキャッシュから提供できます。

Cloudflare KVは、ユーザーの近くにデータを保存するグローバル分散キーバリューストアです。レンダリング済みHTMLをKVにキャッシュできます。レンダリングしたページをTTL付きの値として保存し、以降のリクエストではReactで再レンダリングする代わりに、エッジでKVから読み取ります。

KVの読み取りが高速なのは、リクエストを処理するエッジPoPにデータが複製されているためです。一般的な読み取りレイテンシは5ms未満です。一方、KVの書き込みには結果整合性があり、あるリージョンでの書き込みがすべてのグローバルPoPに伝播するまでに最大60秒かかります。そのため、一部のユーザーには短時間、古いデータが表示される場合があります。

Cloudflare R2は、エグレス料金のないS3互換オブジェクトストレージサービスです。KVに収まらない大きなアセットに適しています。たとえば、WASMモジュール、事前レンダリングしたOG画像、大規模なJSONデータセットなどです。Workersからは、KVと同様にバインディングを介してR2にアクセスします。

Cloudflare Enterpriseはキャッシュタグをサポートしています。Cache-Tag: product-42を付けてレスポンスをタグ付けし、product 42が変更されたときにCloudflareのAPIを呼び出すと、product-42が付いたすべてのレスポンスをパージできます。これにより、キャッシュ全体をパージせず、対象を絞ってキャッシュを無効化できます。

Workerの新しいバージョンをデプロイすると、既存のキャッシュ済みHTMLが古いJSバンドルのファイル名を参照する可能性があります。堅牢な方法は、キャッシュキーにデプロイのバージョンを含めることです。または、バージョン付きのバンドルファイル名（Viteのコンテンツハッシュによる）を使えば、古いHTMLからも常に有効なキャッシュ済みJSファイルを参照できます。

SSR HTMLをKVにキャッシュするWorkerは、次のパターンに従います。URL（必要に応じてロケールも含む）からキャッシュキーを計算し、KVにヒットがあるか確認します。ヒットした場合は、キャッシュ済みHTMLを即座に返します。ミスした場合はReactでレンダリングし、結果をTTL付きでKVに保存してから、新しくレンダリングしたHTMLを返します。

Cloudflare KVが書き込みに使用する整合性モデルは何ですか？

Reactアプリのエッジキャッシュでは、複数の戦略を組み合わせます。公開ページのCDNキャッシュにはCache-Controlのs-maxageを、パーソナライズされたレスポンスの共有防止にはVary: Cookieを、エッジでキャッシュしたレンダリング済みHTMLにはKVを、きめ細かな無効化にはキャッシュタグを使用します。KVの結果整合性モデルでは、書き込みの伝播に最大60秒かかるため、それを考慮してTTLと無効化戦略を設計してください。