直したのに画面が変わらない — キャッシュの仕組み

この記事は、直したのに画面が変わらないという場面を扱います。

コードを直してデプロイしたのに、開いてみると前のままだった、というときの話です。

原因はたいていコードではなく、どこかに残っている古いコピーです。

自分だけが古いのか、全員が古いのかで、どこに残っているかを見分けられます。

キャッシュとは — 取っておいたコピーを、取りに行かずに返す仕組み

キャッシュ（cache。一度取り寄せたものを近くに取っておき、次からは取りに行かずにそれを返す仕組み）は、同じものを何度も取りに行かないためにあります。

一度取り寄せたものを手元に置いておき、2 回目からはそれを使います。

速さと引き換えに、新しくなったことに気づかない時間ができます。

この取っておく時間が有効期間（max-age。取っておいたコピーを、取りに行かずに使ってよい時間）です。

有効期間が切れるまでは、サーバーを直しても手元のコピーが使われ続けます。

画像や CSS のように変わりにくいものほど、長めに設定されています。

直したのに変わらない時間があるのは、有効期間がまだ切れていないからです。

キャッシュは古いコピーを返す仕組み

キャッシュとは、一度取り寄せたものを近くに取っておき、次からはそれを返す仕組みです。

毎回取りに行かないので速くなりますが、その間にサーバー側が新しくなっても気づかないので、直したのに変わらないという状態が起きます。

コピーが置かれる 3 か所 — 自分の中・配信の途中・サーバーの中

コピーが置かれる場所は 1 つではありません。

利用者に近いほうから順に 3 か所あり、入れ子になっています。

いちばん内側の、自分のブラウザが持つコピーがブラウザキャッシュ（browser cache）です。

2 番目のCDN（Content Delivery Network。利用者に近い場所にコピーを置いて配る仕組み）は、多くのデプロイ先に最初から組み込まれています。

この 3 か所は、消し方も効く範囲も違います。

CDN のコピーを消させる操作がパージ（purge。配信の仕組みが持っているコピーを消し、取り寄せ直させること）です。

デプロイのたびに自動でパージする設定になっていることもあります。

強制的に読み込み直すとは

ふつうの再読み込みでは、手元のコピーがそのまま使われることがあります。

取り寄せ直させる操作はスーパーリロード（強制再読み込み）と呼ばれ、確かめるだけなら、履歴を残さない window で開いても同じことができます。

自分だけ古いのか、全員が古いのかで切り分ける

3 か所を上から順に試すより、先に範囲を確かめるほうが早く終わります。

見るのは、自分以外の人にも古く見えているかどうかです。

自分だけなら、原因は自分のブラウザの中にしかありません。

ほかの人にも古く見えるなら、手元をいくら読み込み直しても変わりません。

いちばん下は、そもそも新しいファイルが公開サーバーに届いていない場合です。

ビルドで失敗していれば、公開されているのは前の成果物のままです。

読み込み直して直ったからといって、解決とは限らない

自分の手元で読み込み直すと新しくなりますが、それは自分の 1 台のコピーが入れ替わっただけです。

利用者の端末には、有効期間が切れるまで古いコピーが残ります。

ファイル名を変えると、古いコピーが使われなくなる

消して回るのではなく、そもそも古いコピーが使われないようにする方法があります。

中身を変えたときに、ファイル名も一緒に変えるやり方です。

ファイル名の一部を中身から計算した文字に置き換えると、中身が変わるたびに名前も変わります。

名前が違えば、手元のコピーは別のファイルなので使われません。

この名前を付ける作業は、ビルドのときに自動で行われます。

自分で名前を考える必要はありません。

入口の index.html だけは名前を変えられないので、有効期間を短くしておきます。

中で読み込むファイルの名前が新しくなっていれば、そこから先は自動で新しいものが届きます。

手前で見つかった時点で、それより先へは取りに行きません。

だから 1 か所でも古いコピーが残っていると、新しいものは届きません。

消して回るより、名前を変えるほうが確実

中身を変えたときにファイル名も変われば、手元のコピーは別のファイルなので使われません。

この名前付けはビルドが自動で行うので、名前を変えられない入口のファイルだけ有効期間を短くしておきます。