HTTP caching hoạt động thế nào với immutable asset và CDN?

Question

IT Interview Practice · Accepted Answer

HTTP caching cho phép trình duyệt và CDN tái dùng một response thay vì fetch lại, được điều khiển bằng header **`Cache-Control`**. Pattern thắng cuộc cho web app: **hash tên file asset và cache mãi mãi; giữ HTML không cache được.**

## Chiến lược hai tầng

```http
# Asset đã hash, có version — nội dung không bao giờ đổi với một URL cho trước
Cache-Control: public, max-age=31536000, immutable
# vd.  /static/app.9f2c1a.js   (hash đổi khi nội dung đổi)

# HTML — luôn phải mới để trỏ tới hash asset mới
Cache-Control: no-cache
```

- **`immutable`** báo trình duyệt không bao giờ revalidate — không có request điều kiện nào cả, kể cả khi reload. An toàn vì hash trong tên file *chính là* version; nội dung mới = URL mới.
- **`no-cache`** trên HTML dễ gây hiểu lầm: nó nghĩa là "cứ lưu, nhưng revalidate trước khi dùng" (trả 304 nếu không đổi), nên người dùng luôn nhận HTML tham chiếu tới hash asset hiện hành.

## Revalidation và CDN

- **`ETag`** / `Last-Modified` cho phép response `304 Not Modified` rẻ khi `max-age` hết hạn.
- **CDN** cache ở các edge node gần người dùng. Dùng `s-maxage` cho cache CDN dùng chung và `stale-while-revalidate` để phục vụ nội dung cũ tức thì trong khi làm mới ở nền:

```http
Cache-Control: public, s-maxage=600, stale-while-revalidate=86400
```

## Bẫy thường gặp

- Cache HTML với `max-age` dài → người dùng kẹt ở phiên bản cũ mà không cách nào bust.
- `immutable` trên URL không hash → bạn không thể ship bản sửa.

## Tại sao điều này quan trọng

Caching là cách tăng tốc rẻ nhất — biến lượt truy cập lặp lại thành chi phí mạng bằng không và giảm tải cho origin. Pattern asset-hash-immutable + HTML-revalidate là chuẩn ngành; giải thích được *vì sao* `no-cache` ≠ "đừng cache" cho thấy chiều sâu thực sự.

Chiến lược hai tầng

Revalidation và CDN

Bẫy thường gặp

Tại sao điều này quan trọng

Câu hỏi liên quan