こんばんは！

今日は、昨日の記事の続きでキャッシュ対策について書きます。
昨日の記事をまだ読んでいない方は、ぜひ読んでみて下さい。
【プログラミング学習】 なぜかWebページの更新が反映されない時に確認すべきポイント

必要な時に取得データを更新させる方法

Webを更新したのに、ユーザーのブラウザにキャッシュが残っていて、更新が反映されないのでは困ってしまいます。

そこで何かしらの対策が必要なのですが、まず1つやれる方法として、ブラウザに一切のキャッシュをさせないという方法があります。

サーバー側の対応で、ブラウザに一切キャッシュをさせないことができるのです。

そうすると、ブラウザはデータをキャッシュしなくなるので、毎回サーバーにデータを取りに行きます。
そうすると当然、Webを更新した時にはそれがユーザーのブラウザに反映されることになります。

しかし、それではキャッシュが全く使えなくなってしまって、画面の表示が遅くなってしまいます。

データが更新されていない時にはキャッシュを使わせるようにして、データが更新されたら、その時にはデータを取りに来るようにしたいですね。

簡単な方法があってそれが、cssやjavascript、画像のファイルについてクエリパラメーターを付けてあげることです。

cssファイルを例に見ていきます。

最初のリリースでは、cssファイルの参照を

<link rel="stylesheet" href="css/style.css?version=1">

としておきます。

そして、次にcssを更新した時には、

<link rel="stylesheet" href="css/style.css?version=2">

に変更をしてやります。

クエリパラメータを変更しているだけなので、取得しにいくcssファイルは変わらないのですが、URLが変わっているので、ブラウザは別ファイルと判断します。

別ファイルと判断するためにブラウザはキャッシュを使わずに、サーバーにデータを取りにいきます。
従って、無事、cssの更新を反映させることができます。

以降、クエリパラメーターを更新するまでは、cssファイルに関して、ブラウザはキャッシュを使ってくれるので、cssの取得は高速化されます。

これはjavascriptファイルであっても、同じです。
内容の更新をした時だけ、クエリパラメーターを付与してあげれば良いのです。

いかがでしょうか？
簡単では無いでしょうか？

作業自体は非常に簡単なのですが、これを更新のたびに毎回やらないといけないとすると、意外に面倒です。

そこで実は、ファイル変更時にクエリパラメーターを自動で変更して付与するような仕組みもあります。
毎回手動で実施するのは大変なので、そのような仕組みを使って対応するのが一般的です。

その方法については、また別の記事で紹介したいと思います。

昨日・今日とキャッシュについての記事を書きました。
「変更が反映されない！」となった時には、ぜひ今回の話しを思い出して下さい。

# 今日も、最後までお読み頂きありがとうございます！
感想や質問などございましたら、コメント頂けますと嬉しいです。
全て返信させて頂きます！

では、また明日！