やってくれること#

• 静的アセットの高速配信：画像、CSS、JS、フォント、動画など。
• オリジンの保護：エッジでヒットすればオリジンに到達しないので、コスト・負荷・障害耐性が改善する。
• TLS終端：エッジで HTTPS を解いてバックエンドに渡すことで、各リージョンのアプリサーバーが TLS の重さを引き受けずに済む。
• セキュリティ機能：DDoS 緩和、WAF、Bot対策。多くの CDN がオプションで提供している。
• エッジコンピューティング：単純キャッシュにとどまらず、エッジで関数を実行する仕組み（Cloudflare Workers、Vercel Edge Functions など）が一般化している。

キャッシュの基本#

Cache-Control ヘッダーを軸に動きます。

• public, max-age=31536000, immutable → 1年キャッシュOK。ハッシュ付きファイル名のアセット向け。
• private, no-store → キャッシュ禁止。個人情報を含むレスポンスなど。
• s-maxage を使うと、CDN とブラウザのキャッシュ時間を分けられる。

「ファイル名に内容のハッシュを入れて、長期キャッシュ＋デプロイで別名になる」のがフロントエンド配信の鉄板パターンです。

代表的なサービス#

• 汎用：Cloudflare、Fastly、Akamai、CloudFront
• フレームワーク統合系：Vercel、Netlify、Cloudflare Pages

動的コンテンツとどう付き合うか#

最近は HTML や API レスポンスもエッジでキャッシュ／レンダリングする流れが強まっています。Stale-While-Revalidate、Surrogate-Key、Tag による Purge など、運用面でも工夫の余地が広がっています。

CDN は「画像を速くするやつ」から、「配信レイヤーそのものを設計する場所」に変わってきていると考えるのが今っぽい捉え方です。