JavaScriptをがんばるブログ

React,OSS,ソフトウェア開発が中心のブログです👨‍💻

日記: Cache-Control: max-age をResponse Headerで使用する場合とRequest Headerで使用する場合の違い

とあるimgのキャッシュ期間を確認するためchromeのdeveloper toolを眺めていると、
Respose Headerは

Cache-Control: max-age=604800

となっているのに対して、
Request Headerは

Cache-Control: max-age=0

となっていました。
Response Headerで使用する場合はキャッシュする期間が指定される事が知っていましたが、
Request Headerで使用された時の意味が分からなかったので調べてみました。

どうやら指定したmax-age以内に作成されたリソースを取得するという意味になるようです。
max-age=0なら焼きたておくれ〜(-^〇^-)って事ですね。

しかし

  • Response Header: 604800秒(1週間)キャッシュしろ
  • Request Header: 0秒以内に作成されたリソースをくれ

双方の主張が矛盾しています。
それでも対象imgのHTTP StatusCodeは304 Not Modified。
表示されているのはクライアントにキャッシュされたimgです。

今後webを支える技術を読んで正しく理解したいポイントですが、
おそらくクライアントが持っている1週間以内に作成されたリソースと最新のリソースとしてサーバが返却しようするものに差がなければ、
クライアントが既に持っているリソースを使用しているのだと思います。
Etagなどを使いサーバサイドでクライアントがキャッシュしたリソースとサーバにある最新リソースの差分をチェックして変更が無ければResponseCode 304 Not Modifiedを返却し、
変更があればResponceCode200で最新のimgをクライアントに送信するものと予想します。

HTTP2はこういう情報もバイナリ化されて読めなくなるんだろうか、気になるので調べてみよう。

参考

d.hatena.ne.jp

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)