Cache Bustingとは？

最新のウェブ開発では、開発の進行に伴ってJavaScriptやCSS、画像などのコンテンツが頻繁に更新されることが多いです。しかし、ウェブブラウザーの仕組みが正しく理解されていないために、コンテンツを更新していくうちにウェブサイトに問題が発生することがあります。 この記事では、ウェブブラウザーのキャッシュの仕組みについて学び、そしてContent Repository 7での簡単で実用的なCache Bustingの方法をご紹介します。

なぜ問題が発生するのか？

ウェブブラウザーは通常、静的コンテンツ（CSS、JavaScript、画像ファイルなど）をキャッシュするため、次に同じサイトを表示したときに、それらのコンテンツを再ダウンロードしません。 この仕組みは時間と帯域幅を節約するのに最適ですが、更新された一部のコンテンツがダウンロードされない場合に静的コンテンツのバージョンが同期しなくなり、ウェブサイトの表示が壊れてしまうなどの問題を引き起こすことがあります。

Cache Bustingとは？

Cache Busting（キャッシュバスティング）とは、ウェブサイトやウェブアプリケーションの最新バージョンをウェブブラウザーに読み込ませるために、ウェブ制作で使用される手法の一つです。 ウェブサイトの変更がすぐにウェブブラウザーに分かるようにし、古いコンテンツや一貫性のないコンテンツで問題が発生しないようにするために使用されます。特に、ウェブサイトのコードベースが頻繁に更新される場合や、新機能を導入する場合に重要です。 ウェブブラウザーはダウンロードした静的コンテンツを保存する際、そのコンテンツのURLと紐づけて保存しています。 Cache Bustingは、静的コンテンツのURLに一意の識別子を追加することで実現され、ウェブブラウザーは、ローカルに保存されているキャッシュバージョンを読み込むのではなく、ウェブサイトを訪れるたびに静的コンテンツの新しいバージョンをダウンロードするようになります。 Content Repository 7での実装例を見てみましょう。

<link rel="stylesheet" href="style.min.css?r${resource.getResource('style.min.css').lastModified.time}"/>
    

例えば、このようにURLに更新日付を追加しておくことにより、ウェブブラウザーに最新のコンテンツがダウンロードされるようになります。

Cache Bustingを使いこなしましょう！

この記事では、ウェブブラウザーのキャッシュの仕組みを学び、そしてウェブ制作にCache Bustingをどのように取り入れるのかをご紹介させて頂きました。 早速、Content Repository 7を使って、ウェブサイトにCache Bustingを取り入れてみてください。