CDN のキャッシュヘッダ設計

静的サイトは「何をどれだけキャッシュさせるか」を自分で決められる。逆に言えば、決めないと CDN とブラウザの既定値任せになる。ヘッダ設計の基本形は二層で足りた。

二層の基本形

ファイル名にコンテンツハッシュが入るアセット（CSS・JS・最適化画像）は、内容が変われば URL も変わる。だから最長のキャッシュと immutable を与えてよい。

/_assets/*  Cache-Control: public, max-age=31536000, immutable
/*.html     Cache-Control: public, max-age=0, must-revalidate

HTML はその逆で、URL を変えずに内容が更新される。短命にして再検証させれば、デプロイ直後から新しい内容が配られ、ETag が一致する間は 304 で転送量も抑えられる。

エッジキャッシュとの関係

ホスティング側のエッジは、この指定とは別の層でキャッシュを持つことがある。デプロイでエッジが自動パージされるサービスなら HTML の max-age を多少延ばす選択もあるが、まずは「ブラウザには持たせすぎない」側に倒しておくのが安全だった。

まとめ

ハッシュ付きは永久・HTML は短命＋再検証。この二行から始めて、転送量や表示速度に不満が出た箇所だけ個別調整するのが、迷いの少ない順序だと思う。