Zenn
Closed6

Web開発におけるCacheについて調査・まとめ

まさぴょん🐱まさぴょん🐱

Web制作・Web開発でよくある Cache対応 ( Cache Buster ・Cache Busting )

Client側の端末に Cacheが残っていると、開発によって Updateされても即時に反映されず、古いバージョンのまま表示されてしまうことがあります。

そのため、Cacheにも考慮した対応を Webサイトや、Webアプリ開発者はする必要があります。

ブラウザキャッシュをさせずに確実に更新させる方法として、
一般的なものに、Cache Buster (キャッシュ・バスター)という対応方法があります。

Cache Buster (キャッシュ・バスター)は、更新したタイミングで、読み込むファイル名やファイルのPathを Updateするなどの対応によって、更新されたファイルを読み込ませるようにする方法です。

Cache Buster (キャッシュ・バスター)の具体的なやり方には、次のようなものがあります。

  1. クエリパラメーターを使ってバージョン管理番号などを付与する（例：script.js?ver=2）
    • タイムスタンプなど動的な値を埋め込む方法もある。
  2. ファイル名にバージョン管理番号を入れる（例：script.v2.js）
  3. ファイルパスにバージョン管理番号を入れる（例：/v2/script.js）

中でも、よく使用されるのが、1番目の 更新したファイルに GETパラメータ( クエリパラメーター )を付与することで、更新されたファイルを読み込ませるようにする方法です。

sample.html
<!-- CSS -->
<link href="style.css?ver=1.0.1" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.1" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.1" alt="Sample">

( 追記 )
こちらの記事で、Path文字列の末尾にCacheBuster (キャッシュ無効化)のタイムスタンプを追加する方法を記載しました。

JavaScriptで、URLのPath文字列にクエリパラメーター(?)があるかどうかの判定や作成する方法
https://masanyon.com/javascript-url-path-string-query-parameters-create/

【 引用・参考 】

CSS・JSファイルの Cache対応について
https://notes-de-design.com/website/tips/reload-cache-add-parameter/

もうキャッシュの削除をお願いしたくない！CSS・JS・画像のブラウザキャッシュさせない方法
https://netamame.com/cache-busting/

まさぴょん🐱まさぴょん🐱

HTML の metaタグで、ページのキャッシュを無効にする

meta要素で、文書のキャッシュを無効にすることができます。この要素はhead要素の中で使用します。

この指定により、常に最新の情報が表示されるようになることが期待されます。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

https://www.tagindex.com/html_tag/page/meta_pragma.html

まさぴょん🐱まさぴょん🐱

Nuxt.js の場合の Cache-Control の追加方法

Nuxt.jsで、Cacheを保存しない設定をするには、NuxtAppで作成するPageに対して、
cache-control: no-cacheをRequestHeaderに追加するだけで完了します。

まずはnuxt.config.jsに以下を追記します。

nuxt.config.js
・・・
  serverMiddleware: [
    '~/serverMiddleware/deliveryFrontend.js',
  ],
・・・

続いて、serverMiddlewareディレクトリを作成して、その中にdeliveryFrontend.jsを作成して、以下の内容を追加します。

deliveryFrontend.js
/** Client端末に Updateを即時反映させるために Cache を Offにする設定を追加する */
const express = require('express')
/** Express_Instanse */
const app = express()
app.use(function (req, res, next) {
  // Cacheを保存しない設定を追加する
  res.setHeader('cache-control', 'no-cache, no-store, must-revalidate')
  next()
})
// ModuleをExportして、参照できるようにする。
module.exports = app
まさぴょん🐱まさぴょん🐱

Cache-ControlのためのRequestHeaderの設定

  1. ブラウザに一切、キャッシュさせたくない場合
    • サーバからクライアントへのHTTP応答ヘッダをCache-Control "no-cache"にする。
  2. ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしたい場合
    • サーバからクライアントへのHTTP応答ヘッダにCache-Control "max-age=0" とExpires "Mon, 26 Jul 1997 05:00:00 GMT"をSetする。
    • ブラウザ毎に片方しかサポートしていない場合があるので、両方のヘッダを指定しておいた方がいいです。
    • 最初から既に期限切れ、という意味です。

https://qiita.com/hkusu/items/d40aa8a70bacd2015dfa

https://qiita.com/shirauix/items/cbaa4fed86f42a0c27ec

まさぴょん🐱まさぴょん🐱

Cache Control 関連の概念・意味についてまとまっているスクラップ記事

ここがわかりやすいので、まんま引用します。

キャッシュの流れ

  1. レスポンスを保存する
  2. 保存したレスポンスを再利用する

キャッシュの種類

  • local (private) キャッシュ
    • 特定のユーザー専用のキャッシュ
    • ブラウザのキャッシュなどが該当する
  • shared キャッシュ
    • 複数のユーザがレスポンスを再利用するためのキャッシュ
    • ProxyやCDNのキャッシュなどが該当する

キャッシュの設定

  • public
    • レスポンスをどのキャッシュ (local、shared ともに) にも保存し、再利用できる
  • private
    • レスポンスを local キャッシュのみに保存し、再利用できる
  • no-cache
    • レスポンスをどのキャッシュ (local、shared ともに) にも保存できる
    • キャッシュが stale (有効期限が過ぎている) かどうかに関わらず、再利用時に必ずサーバーに確認を取る必要がある
  • no-store
    • レスポンスをどのキャッシュ (local、shared ともに) にも保存させない
  • 個人情報などを扱うページについては、localキャッシュのみを許可する private を設定する。どこにもキャッシュされたくない場合は、no-store を設定する。(no-cache ではない！！)
  • ちなみに、なにもCache-Control を設定しない場合、レスポンスはどこかでキャッシュされる可能性があるので、キャッシュされたくない値を使うときは注意する。

https://zenn.dev/nissy_dev/scraps/9755e2622089a9

このスクラップは2023/07/17にクローズされました