【キャッシュ対策】必要なときだけ取得データを更新させる方法

こんにちは！Kです！

今回は、キャッシュ対策について書こうと思います。

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

そこで何かしらの対策が必要なのですが、その方法について今回は簡単にできるものを一つ紹介します。

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

今回紹介する方法は、ブラウザに一切のキャッシュをさせないという方法です。

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

そうすると、ブラウザはデータをキャッシュしなくなるので、毎回サーバーにデータを取りに行きます。
そうすると当然、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ファイルであっても、同じです。
内容の更新をした時だけ、クエリパラメーターを付与してあげれば良いのです。

最後に

いかがでしょうか？
割と簡単な方法だったかと思います。

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

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

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

「変更が反映されない！」となった時には、ぜひ今回の記事を参考にしてみてください(^^)

それでは、また！

Follow me!