ブラウザキャッシュ問題を解決！キャッシュバスティングについて

フロントエンド バックエンド

Webアプリを作る上であるあるな話である「キャッシュ問題」

  • 開発中やアップデート直後に何か動かなくなる時がある・・・
  • ファイル差し替えたのに古いものが表示されてしまう・・・
  • スーパーリロードやキャッシュ削除を試すと大丈夫！
    →だけど面倒だしログイン情報とか消える場合もあるし・・・極力やりたくない

　
開発者やPCスキルが高い人には何とか解決できるかもしれませんが、それ以外の人には基本不具合としか認識されません。
そんな不毛な問題に終止符を打つ「キャッシュバスティング」について説明します！

キャッシュバスティングとは？

キャッシュバスティング（Cache Busting）やキャッシュバスター（Cache Buster）とも言ったりしますが、ここではキャッシュバスティングとします。
　
直訳すると「キャッシュを破壊する」と物騒な感じですが、キャッシュを無視して最新バージョンを読み込ませるために使用される手法です。

  • 通常の記述
<script src="~/sample.js"></script>
  • キャッシュバスティング対応
<script src="~/sample.js?20240214"></script>

キャッシュバスティング対応はURLの後ろにクエリパラメータがついています。
　
ブラウザはクエリパラメータを含めたURL全体でファイルをキャッシュする仕様になります。
そのため、キャッシュされている前のURLから1文字でも違っていれば別物扱いでキャッシュを利用しないで最新のファイルが使われるようになります。

具体的なキャッシュバスティングの方法

  • 手動
    • 原始的ですが何の制約も受けないですぐに実践できます。
      ファイルの中身を変更したらパラメータの箇所を変えるだけでできます。
<script src="~/sample.js?ver=1.0.0.1"></script> バージョンで付けたり
<script src="~/sample.js?20240214"></script> 日付で付けたり
  • 自動的につける
    • フレームワークやツールでキャッシュバスティングに対応している場合もありますし、JavascriptやPHPなどで動的にパラメータを生成して対応もできます。
      　
      普段お使いのツールや言語で対応しているか調べてみると良いかもしれません。

ASP.NET Coreの場合

弊社で採用しているASP.NET Coreではめちゃくちゃ簡単にキャッシュバスティング対応ができるので紹介します。

<!-- asp-append-versionというヘルパー機能を使うだけ -->
<script src="~/sample.js" asp-append-version="true"></script>

<!-- 実際にブラウザで見ると以下のようになる -->
<script src="~/sample.js?v=_DBO9MGl4k-3a-jFs0vKFGyAKwmjqUWjhB7Ph7dHBRA"></script>

こちらのパラメータですが、自動的にハッシュ値を付加してくれる仕様になっています。

  • ファイルに変更がない場合
    →ハッシュ値は変わらないためキャッシュが有効

  • ファイルに変更がある場合
    →少しでも変更があるとハッシュ値が変わりキャッシュが無効
    →新しいファイルが読み込まれる

日時やビルドバージョンといった対応だとキャッシュが無効化されますが、常にファイルのダウンロードがされるためパフォーマンスが犠牲になります。
　
その点、ハッシュ値の場合は変更がない場合はキャッシュを使うことも出来るため、大変有能な子です！（宣伝）

おわりに

KENTEMでは、様々な拠点でエンジニアを大募集しています！
建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
https://hrmos.co/pages/kentem2211/jobs/A0008hrmos.co hrmos.co hrmos.co hrmos.co hrmos.co