ブラウザのキャッシュとは何ですか。使うときに何に気をつけますか｜技術面接問題

こう聞かれます

「ブラウザのキャッシュとは何ですか。どう制御しますか」
「no-cache と no-store の違いを説明してください」
「サイトを更新したのに、利用者の画面が古いままでした。なぜで、どう防ぎますか」(困った場面から聞く形)

面接官が見ている点

キャッシュを「速くなる物」だけでなく、「古い物を見せる危うさ」と組で語れるか
決めるのはサーバーの応答のヘッダーだ、と分かっているか
長く持たせる物と、毎回確かめる物を分ける設計ができるか

短い答え

ブラウザのキャッシュは、一度受け取ったファイルを手元に取っておき、次に同じ物が要るとき通信を省く仕組みです。
どれだけ使ってよいかは、サーバーが Cache-Control のヘッダーで決めます。no-cache は毎回確かめてから使う、no-store は保存しない、という意味です。
気をつけるのは更新が届かないことで、HTML は毎回確かめ、CSS や JavaScript はファイル名に版を付けて長く持たせます。

少し詳しい答え

新しいうちはそのまま使う

Cache-Control: max-age=3600 が付いた応答は、受け取ってから 3600 秒のあいだ、サーバーに聞かずに手元の物を使えます。通信が 1 回も起きないので最も速い一方、その間にサーバーで中身を変えても届きません。

古くなったら確かめる (ETag と 304)

サーバーは中身ごとの目印を ETag で渡せます。期限が切れたあと、ブラウザは目印を添えて確かめに行きます。

GET /index.html HTTP/1.1
If-None-Match: "v42"

中身が同じなら、サーバーは本文を付けずに 304 を返します。

HTTP/1.1 304 Not Modified
ETag: "v42"

ブラウザは手元の物をそのまま使います。1 往復は要りますが、本文を送り直さないぶん軽くなります。

no-cache と no-store

no-cache 保存してよいが、使う前に毎回サーバーに確かめる。名前に反して「保存しない」ではありません
no-store そもそも保存しない。個人の情報を含む画面など、手元に残したくない物に使います

ファイル名に版を付ける

CSS や JavaScript は app.3f9a1c.js のように、中身から作った版をファイル名に入れます。中身が変わればファイル名も変わるので、古いキャッシュとぶつかりません。だから 1 年のように長く持たせられます。その代わり、ファイル名を書いている HTML は no-cache にして毎回確かめます。

作った物と結ぶなら、たとえば「デプロイしても画面が変わらないと言われたので、ビルドでファイル名に版を付け、HTML だけ毎回確かめる設定にした」のように話します。

よくある間違い

「no-cache はキャッシュしない」と言う保存はします。使う前に確かめる、という意味です。保存させないのは no-store です
HTML まで長く持たせる 新しい CSS や JavaScript の名前を書いた HTML が届かず、更新が反映されません
ログイン後の画面を共有のキャッシュに載せる CDN などに載ると、別の人に個人の画面が届くおそれがあります。private か no-store を付けます

深掘りの問い

「304 が返ったのに、ブラウザが手元の物を失っていたら」 304 には本文が無いので、もう一度ふつうに取り直す必要がある、と答えます
「ブラウザのキャッシュと CDN のキャッシュは何が違いますか」 ブラウザは 1 人だけのため、CDN は多くの人で分け合う置き場です。だから個人の物は CDN に置かない、とつなげます
「新しいファイルを出すとき、古い版のファイルはすぐ消してよいですか」 開いたままの画面や古い HTML が古い名前を頼むので、しばらく残す、と答えます