請解釋 HTTP caching 機制

HTTP 快取的目的

減少重複的網路請求，加快頁面載入速度、降低伺服器負擔。

HTTP 快取分為兩個層次：

1. 強制快取（Strong Cache）：直接用本地快取，不發請求到伺服器。
2. 協商快取（Negotiation Cache / Conditional Cache）：發請求詢問伺服器「資源是否有更新」。

一、強制快取

Cache-Control（HTTP/1.1，優先）

Cache-Control: max-age=31536000, immutable

指令	說明
max-age=<秒>	快取有效期（從回應時間起計）
no-cache	每次都要向伺服器做協商驗證（不代表不快取）
no-store	完全不快取
public	可被共享快取（如 CDN）儲存
private	只可被瀏覽器私有快取儲存
immutable	告知資源在有效期內絕不會改變

Expires（HTTP/1.0，較少用）

Expires: Wed, 21 Oct 2026 07:28:00 GMT

指定絕對過期時間，Cache-Control 優先。

命中強制快取時

瀏覽器直接從 disk/memory cache 讀取，狀態碼顯示 200 (from cache)，不發任何請求。

二、協商快取

當強制快取過期（或 no-cache）時，瀏覽器帶著快取標記向伺服器詢問：

ETag / If-None-Match（精確，優先）

伺服器回應時附上資源的「指紋」：

ETag: "abc123"

瀏覽器再請求時帶上：

If-None-Match: "abc123"

若資源未改變，伺服器回 304 Not Modified（無 body，節省流量）。

Last-Modified / If-Modified-Since（時間精度較低）

Last-Modified: Mon, 01 Jan 2026 00:00:00 GMT

If-Modified-Since: Mon, 01 Jan 2026 00:00:00 GMT

若資源未在該時間之後修改，伺服器回 304。

ETag 優先於 Last-Modified；兩者都有時以 ETag 為準。

快取流程圖

請求資源
  ├─ 本地有快取？
  │    ├─ 快取未過期（max-age 內）→ 200 (from cache)，不發請求
  │    └─ 快取已過期 → 帶 ETag/Last-Modified 向伺服器詢問
  │              ├─ 資源沒變 → 304 Not Modified，用本地快取
  │              └─ 資源已更新 → 200 + 新資源
  └─ 無快取 → 200 + 新資源

實務建議

資源類型	建議快取策略
HTML	Cache-Control: no-cache（每次協商）
JS / CSS（帶 hash）	Cache-Control: max-age=31536000, immutable
圖片（帶 hash）	Cache-Control: max-age=31536000, immutable
API 回應	依業務需求，多用 no-store 或短 max-age

帶 content hash 的檔名（如 main.abc123.js）讓靜態資源可以設超長快取，更新時只需換 hash。