2025/05/13 12:59 Tower Defense: Cache Control
やっほー、ロボ子！今日のITニュースはウェブサイトのキャッシュ戦略についてじゃ。
博士、こんにちは。キャッシュ戦略ですか、興味深いですね。具体的にはどのような内容なのでしょう？
この記事では、ウェブサイトを3つの難易度に分けて、それぞれのキャッシュ戦略を解説しておるぞ。Easy、Medium、Hardじゃ。
なるほど。Easyはほぼ静的なサイト、Mediumはデータ駆動型、Hardは認証が必要なサイトですね。
その通り！Easyなサイトでは、コンテンツハッシュ化されたリソースを使うのがオススメじゃ。例えば、CSSやJSファイル名にハッシュ値を入れるんじゃ。
ファイル名にハッシュ値ですか？それはどうしてでしょう？
ファイルの内容が変わらない限り、キャッシュをずっと保持できるからの。`Cache-Control`ヘッダーで`public, max-age=31536000, immutable`を設定すれば完璧じゃ。
なるほど、キャッシュの有効期限を長く設定できるんですね。CDNについても触れられていますね。
そうじゃ。CDNを使うと、ユーザーの近くのサーバーからコンテンツを配信できるから、表示が速くなるんじゃ。VercelのCDNは119のロケーションがあるらしいぞ。
すごい数ですね！CDNはどのようにコンテンツのバージョンを管理しているんですか？
`Etag`ヘッダーを使うんじゃ。ブラウザは`If-None-Match`ヘッダーで前回のEtag値を送る。コンテンツが変わってなければ、サーバーは`304 Not Modified`を返すぞ。
効率的ですね。動的な部分はどのように処理するんですか？
動的なコンテンツはクライアントサイドのJavaScriptで処理して、APIから取得するんじゃ。こうすると、静的なコンテンツと動的なコンテンツを分けられるぞ。
なるほど。Mediumなサイトでは、どのような戦略が有効なのでしょうか？
Mediumなサイトでは、短期キャッシュ制御ヘッダーが重要じゃ。例えば、`public, max-age=15, s-maxage=15, stale-while-revalidate=15`を設定するんじゃ。
それぞれのパラメータの意味は何ですか？
最初の15秒は新鮮、次の15秒は古いが使用、CDNがバックグラウンドで更新。30秒後には完全に古くなる、という感じじゃ。
`X-Vercel-Cache`ヘッダーでキャッシュの状態を確認できるんですね。
そうそう！バックエンドキャッシュも大事じゃ。メモリキャッシュ、シングルインスタンス化、ディスクキャッシュを組み合わせると効果的じゃ。
シングルインスタンス化は、同じリクエストをまとめることで重複処理を減らすんですね。Goの`singleflight`パッケージを使うと。
その通り！Hardなサイト、つまり認証が必要なサイトでは、ユーザー固有のデータはCDNでキャッシュしにくいから、クライアントサイドでの処理を増やすのがコツじゃ。
差分だけをサーバーと同期することで、サーバー負荷を減らすんですね。
そういうことじゃ！キャッシュはサイトのパフォーマンスとコスト管理に不可欠じゃから、しっかり理解しておくのじゃぞ！
はい、博士！勉強になりました。ところで博士、キャッシュが効きすぎて、新しい服を着ても誰にも気づかれない、なんてことありませんか？
むむ、それは困るのじゃ！私もたまにはオシャレしたいぞ！…って、ロボ子、うまいこと言うのじゃな！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
