キャッシュが原因で更新したのに前と変わらない【キャッシュの削除を毎回依頼しなくても良い方法】

ウェブサイトの作成依頼を受けるとクライアントと作ったサイトを確認しながらやりとりがありますよね。

テストサイトなどを作ってそこでデザインやコンテンツの修正や確認を繰り返しているとよくこんなことがあります。

あなた『先ほどご依頼いただいたデザインの変更（CSSの変更）をしたので確認してください』

クライアント『いや、変わってないですね』

あなた『…。（そんな言い方しなくても…）』

原因はキャッシュが残っているから

原因をご存知の方がほとんどだと思いますが、ウェブサイト作成を始めたばかりの頃は本当に原因がわかりませんでした…。

こちらではちゃんと変更が出来ているのに、クライアント側では変わっていない…。

ご丁寧に変わっていない証拠のスクショが送られてきたり…。

ブラウザなどを確認したりしても問題は解決せず、なにかと思えばキャッシュのせいでした。

キャッシュとはウェブサイトの読み込みを早くするための便利な機能

そもそもキャッシュとはブラウザに付いている便利な機能です。

一度訪問したウェブサイトの画像やデータなどの情報をキャッシュ領域に保管しておいて、次回再訪問したときにサーバーからもう1度ダウンロードするのではなく、キャッシュ領域の前回データを表示するという、読み込み時間を短くするための機能です。

ですがこのキャッシュのおかげで【更新したはずのデータを読み込まずに前回のキャッシュ領域のデータを読み込み表示する】ということが起き、クライアント側では表示されていなかったのです。

特にCSS、JavaScript、画像などはよくこれが起こりやすいのです気をつけましょう。

キャッシュの削除を依頼する

その場合、クライアントにキャッシュの削除を依頼すれば問題は解決します。

キャッシュを削除さえしてもらえれば再度サーバーからデータを読み込みますので、最新のCSSや画像データを読み込んで表示してくれます。

Google Chromeだと設定からキャッシュの削除ができます。

もちろんクライアントだけではなく自分でサーバーに上げた時にチェックするときにも役立ちます。

（ローカル環境でもキャッシュは残ることがあります）

毎回クライアントにキャッシュの削除を依頼するのは面倒…

原因はキャッシュにあることがわかり、削除の仕方もわかったのですが、正直毎回更新する度にクライアントにキャッシュの削除を依頼するのは面倒だし、クライアントにも手間がかかります。

場合によってはキャッシュとは何か？から説明しないといけないこともありますし、出来れば更新したときぐらい自動的に、必ずキャッシュを読み込まず毎回サーバーからデータを取ってきてはくれると助かります。

『要はCSSデータが新しいよ』とサーバーにわかるように指示を出してあげれば良いということですので、クエリを付けてあげます。

<link rel="stylesheet" type="text/css" href="styles.css">
↓
<link rel="stylesheet" type="text/css" href="styles.css？20190614">

style.cssの後ろに?を追加してその後ろになんでもいいので文字を入れます。

私は更新したタイミングがわかりやすいように年月日（回数）を入れていますがルールはなんでも大丈夫です。

このようにするとファイルはもちろんstyle.cssを読み込んでくれるのですが、クエリが変更されていると別のファイルとして認識してくれるので、サーバーから再度情報を読み込んでくれるようになります。

これで何度もキャッシュの削除を依頼しなくても大丈夫ですね。

過去この問題ですごく悩んだのでメモしておきます。