キャッシュバスティングについて、@Yametaro さんリスペクトで関西型言語の会話形式で書いてみました！
ある日
ユーザー「サイトにアクセスするやで！」
ブラウザ「アクセスがあったな」
ブラウザ「サイトを表示するで」
ブラウザ「必要なファイルは・・・よし、キャッシュしてるのがあるから、これを使うで」
ブラウザ「あ、style.css?date=20240808か・・・。そんなファイルはキャッシュしてへんな」
ブラウザ「style.css?date=20240807なら、昨日サーバーはんからもろたんやけどなぁ」
ブラウザ「ほなサーバーはんにstyle.css?date=20240808をリクエストせんとあかんな」
ブラウザ「サーバーはん、style.css?date=20240808をくれや」
サーバー「なんや、新しいリクエストかいな」
サーバー「style.css?date=20240808か。せやかてそんなファイル持ってへんで」
サーバー「あ、よく見たらクエリ文字（?date=20240808）が付いとるやんけ」
サーバー「クエリ文字はただの識別子やから、実際のファイル名には影響せえへんねん」
サーバー「クエリ文字を無視したstyle.cssなら持っとるで」
サーバー「せやから、クエリ文字を無視したstyle.cssを返したろ」
サーバー「ブラウザはん、リクエストされたファイルやで」
ブラウザ「サーバーはん、おおきにやで～」
ブラウザ「お待たせやで、サイトを表示や！」
ユーザー「おっ、なんかサイトのデザイン変わっとるな」
ブラウザ「サーバーはんから貰ったこれは、style.css?date=20240808としてキャッシュしとくやで」
ブラウザ「せやから、またstyle.css?date=20240808が必要になったら」
ブラウザ「サーバーはんから貰うんじゃなくて、今あるのを使うやで」
ブラウザ「これで読み込みの時間を短縮できるんや」
～翌日～
ユーザー「今日もサイトにアクセスするやで！」
ブラウザ「なになに、今日はstyle.css?date=20240809か・・・」
ブラウザ「これもキャッシュしてへんわ」
ブラウザ「またサーバーはんに貰わなあかんな」
ブラウザ「・・・それにしても、なんでこう毎日毎日別のクエリ文字を付けはるんやろか」
開発者「それはな」
開発者「キャッシュバスティングっちゅーねんけど」
開発者「style.cssのバージョンが変わった時に」
開発者「新しいバージョンのstyle.cssを取りに行ってほしいからやねん」
開発者「毎日違うクエリ文字が付いてたら、少なくとも日を跨いだら新しいファイルをサーバーはんに貰うやろ？」
ブラウザ「せや」
ブラウザ「キャッシュしてへんファイルやから、サーバーはんに貰いますわ」
開発者「せやろ」
開発者「つまり、style.cssが変更されても、この場合は翌日には反映されるっちゅー訳や」
開発者「もちろん、もっと早く適用させるために、たとえば時分を入れてもええで」
開発者「クエリ文字も別に何でもええんや」
開発者「ただ、あんまり頻繁にサーバーはんにリクエストするのも気の毒やから」
開発者「どのくらいの頻度がいいかはよく考えんとあかんけどな」
ブラウザ「ほえ～」
まとめ
- キャッシュバスティングとは、静的ファイルをキャッシュからではなくサーバーから取得させるための仕組み
- ファイル名に可変のクエリパラメータを付けることで、キャッシュからではなくサーバーから最新のファイルを取得させる
- 画像ソースの差し替えやデザインの変更などに便利
- ただし、頻繁すぎるとキャッシュの意味がないので、頻度は慎重に調整する必要がある