ブラウザキャッシュ戦略：Cache-Control、ETag、CDN 最適化

HTTP キャッシュの 2 層

ブラウザがリソースを要求
     ↓
① 強キャッシュ（サーバーへ行かない）
   Cache-Control: max-age=31536000
     ↓ 期限切れ
② 検証キャッシュ（変更確認のためサーバーへ）
   ETag / Last-Modified → 304 Not Modified
     ↓ リソース変更あり
③ サーバーから新リソース取得 → 200 OK

Cache-Control ディレクティブ

ディレクティブ	意味	例
`max-age=N`	N 秒間キャッシュをそのまま使う	JS/CSS（1 年）
`s-maxage=N`	CDN が N 秒キャッシュ	HTML（1 日）
`no-cache`	毎回 ETag を検証	API 応答
`no-store`	一切キャッシュしない	機密データ
`immutable`	内容は変わらない	hash 付きファイル名
`stale-while-revalidate=N`	期限後も N 秒は古い版を返しつつ裏で更新	i18n JSON

ToolsKu のキャッシュ設定

# _next/static/chunks/app-abc123.js
Cache-Control: public, max-age=31536000, immutable

# /ja/pdf/merge/index.html
Cache-Control: public, max-age=3600, s-maxage=86400

# /i18n/toolClients/ja.json
Cache-Control: public, max-age=86400, stale-while-revalidate=604800

ETag による検証キャッシュ

# 初回リクエスト
GET /api/config HTTP/1.1
→ 200 OK
   ETag: "abc123"
   Cache-Control: no-cache

# 2 回目以降
GET /api/config HTTP/1.1
   If-None-Match: "abc123"
→ 304 Not Modified（body 空、帯域節約）

ETag はコンテンツの hash から生成されます。変更がなければ 304 でブラウザのローカルキャッシュを使います。

CDN キャッシュ構成

ToolsKu は Alibaba Cloud OSS + CDN で配信しています：

ユーザーが https://www.toolsku.com/ja/ を要求
     ↓
CDN エッジ（北京・上海・広州）
     ↓ ヒット → 即返却（TTFB ~20ms）
     ↓ ミス
OSS オリジン（北京）
     ↓ リソース返却 + CDN に書き込み
CDN → ユーザー

キャッシュキー設計

CDN のキーは通常 URL + クエリ文字列 です。注意点：

?v=123 と ?v=456 は別エントリ
Accept-Language 付きリクエストは Vary で別キャッシュになりうる
ToolsKu はパスで言語を分ける（/zh-CN/、/en/）ため Vary 問題を避けています

よくあるキャッシュ問題

1. JS を更新したのにユーザーが古い版を見る

原因：古い JS が強キャッシュ。新 HTML は新ファイル名を参照するが古い JS が残る。

対策：コンテンツ hash 付きファイル名（Next.js 既定 _next/static/chunks/app-[hash].js）。内容変更で hash が変わり自然に無効化。

2. HTML キャッシュでコンテンツが更新されない

対策：HTML は短めの max-age + s-maxage、または CDN パージ API で明示的に削除。

3. Service Worker と HTTP キャッシュの競合

Service Worker の fetch は全リクエストを横取りでき、HTTP キャッシュより優先されます。SW 更新時はキャッシュバージョンを上げ、古いキャッシュを削除してください。

キャッシュのデバッグ

Chrome DevTools → Network：Size 列（(disk cache) / (memory cache) / 実サイズ）
Response Headers：Cache-Control、ETag、Age を確認
ToolsKu HTTP ステータスコード早見：200/304/404 などの意味

まとめ

適切なキャッシュは Web パフォーマンスの要です。強キャッシュ + 検証キャッシュ + CDN エッジにより、ToolsKu は TTFB 約 50ms の初回表示を実現しています。Cache-Control と ETag を理解することはフロントエンド性能の基本です。