devtools の Network タブを見たときに (disk cache) や (memory cache) となっていてほしいのですがなってくれません
リクエストが発生して 304 が返ってきています
そのレスポンスのヘッダーを見るとちゃんと max-age が付いているのですけどリロードするとまたリクエストが発生します
色々試したところ max-age でキャッシュからロードしてくれるのはリソース扱いのときだけのようです
ブラウザで直接 HTML ファイルや JavaScript ファイルを開いた場合 これらのファイルはキャッシュを見ずにリクエストが発生するようです
HTML から script タグで JavaScript をロードしたり fetch で HTML ファイルを取得するようなケースではキャッシュが使われています
これのせいで無駄に時間を使うことになりました
前からこんな動きでしたっけ
というかこれは共通の仕様？ Chrome の独自仕様？
MDN を軽く見た感じではアクセスするコンテキストで動作の違いとかはなさそうでした
◯ 確認用
require("http").createServer((req, res) => {
if (req.url === "/") {
res.writeHead(200, {
"Content-type": "text/html",
"Cache-Control": "max-age=3600",
})
res.end(`<script src="/a.js"></script><h1>HTML</h1>`)
return
}
if (req.url === "/a.js") {
res.writeHead(200, {
"Content-type": "text/javascript",
"Cache-Control": "max-age=3600",
})
res.end(`console.log(1)`)
return
}
res.writeHead(404)
res.end(`NOT FOUND`)
}).listen(8000)
「http://localhost:8000」 にアクセスして devtools を開いてリロードします
a.js のほうだけキャッシュが使われてるはずです
「fetch("/")」で / にアクセスすると HTML ファイルもキャッシュが使われます
こういう動きだと HTML もキャッシュさせたい場合は E-Tag や LastModified を使って 304 を返せるようにしておいたほうが良さそうですね
SPA を作るときは HTML ページだけはエントリポイントとして更新するために max-age 付けたらダメなので例外にする工夫が必要だったのですが それがいらないという点では便利ですね
リロードで確認すると max-age が無視されるみたいです
https://blog.jxck.io/entries/2023-11-05/reload-and-cache.html
リンクを用意して移動してきた場合はページを開くリクエストでもキャッシュが使われてました
ページを開くリクエストでキャッシュが無効化されるなら SPA のエントリポイントなどの HTML もまとめて max-age をつけておいても大丈夫かもと思ったのに そうはいかなそうです
HTML にも max-age をつけると外部から移動してきたときだけキャッシュが使われて最新版にならない問題が起きてしまいます
