Browser Cache

overview

広義の意味では、動作の高速化を図るため、低速・安価な記憶領域から高速・高価な記憶領域へ一時的に情報を保持することを指す（と思う）。

ブラウザキャッシュは主に、ブラウザの描画に使うリソース（HTML、JS、CSS、画像など）を一定期間ローカルに保持することにより、再度ネットワークアクセスを行った際に高速に表示させる機構を指す（はず）

もちろん、昨今使われる動的ページ（Webシステムによるレスポンス）で生成されるHTMLなどのボディ部分に関しては、キャッシュする意味がないため、使用されない。
しかし、ロゴなどの画像を動的に表示することは特定の状況下以外ではまれであるため、静的コンテンツなどと呼び、キャッシュ対象にする。

また、JavaScriptによる動的描画を中心とした動的ページ（シングルページアプリケーション）は、ユーザ側（⇔サーバ側）であるブラウザによる描画になるため、ソースであるJavaScriptは静的コンテンツ扱いが可能になる。

静的コンテンツを高速化する仕組みとして、一種のキャッシュシステムであるCDNというものもの存在する。
ブラウザキャッシュとは異なるが、いわゆる広義のキャッシュという意味では同じ目的の仕組みになる。

これはこれで話が長そうなので、また別途。 参考:さくらのナレッジ - CDNってそもそも何？なんかサーバの負荷が下がるって聞いたんだけど！〜Web制作/運営の幅が広がるCDNを知ろう第1回〜

Browser Cacheのコントロール

HTTPのレスポンスヘッダにより、サーバ側からリソースのキャッシュをコントロールすることができる。 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

cache-control というヘッダを用いる。

キャッシュを抑止したい場合は、 cache-control: no-store を用いる。

有効期限の設定

様々な指定の仕方で有効期限を設定することができる。 初めてキャッシュを行う時刻からの有効期限秒数を指定する。

特定の日付で有効期限が切れる形式の場合は、このヘッダではなく専用の Expires ヘッダを用いる。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Expires

デフォルトの設定

springMVCで作られたwebシステムはもちろん動的サイトであるため、cacheしたくないはずだが、 デフォルトではどのような動きをするか？

ChromeはDevToolを開いて通信をすると、 cache-control: max-age=0 でリクエストを飛ばすっポイ？
これが原因かわからないけれども常にキャッシュされないし、レスポンスヘッダには cache-control は設定されない。

自分で制御

ResponseEntityオブジェクトでキャッシュコントロールを明示することができる。

@GetMapping("/users/{name}")
public ResponseEntity<UserDto> getUser(@PathVariable String name) {
    return ResponseEntity.ok()
      .cacheControl(CacheControl.maxAge(60, TimeUnit.SECONDS))
      .body(new UserDto(name));
}

動的レスポンスをキャッシュさせたい場合はまぁあれだけど、静的コンテンツをthymeleafでドウコウしたときのキャッシュってどうやって制御するんだろう？