HTTP Caching: Tại Sao Browser Của Bạn Thông Minh Hơn Bạn Nghĩ

Browser vừa tải xong trang này. Nếu bạn refresh ngay bây giờ, hầu hết các file sẽ không được download lại — chúng được serve từ disk hoặc memory trong vài millisecond. Đó là HTTP caching. Hiểu cách nó quyết định lưu gì, giữ bao lâu, và khi nào hỏi lại server — là một trong những kỹ năng highest-leverage trong web performance.

Post này cover hai cơ chế chính: Cache-Control và ETag/Last-Modified, khi nào dùng cái nào, và những mistake hay gặp nhất.

Hai Cơ Chế, Một Mục Tiêu

HTTP caching hoạt động theo hai hướng khác nhau:

Phân biệt được hai cái này là chìa khóa để dùng caching đúng.

Cache-Control: Lever Chính

Cache-Control là response header nói cho browser (và CDN nếu có) biết cách xử lý bản cache hiện tại.

Các directive quan trọng nhất:

Cache-Control: max-age=31536000, immutable
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: max-age=0, must-revalidate

Ý nghĩa thực tế của từng directive:

ETag: Conditional Request

Khi max-age hết hạn (hoặc bạn set no-cache), browser gửi conditional request để check xem có gì thay đổi không:

sequenceDiagram
    Browser->>Server: GET /api/data<br/>If-None-Match: "abc123"
    alt Nội dung không đổi
        Server-->>Browser: 304 Not Modified<br/>(không có body)
    else Nội dung đã thay đổi
        Server-->>Browser: 200 OK<br/>ETag: "xyz789"<br/>(full response body)
    end

ETag là hash của nội dung response. Nếu khớp với cái browser gửi lên, server trả về 304 Not Modified — chỉ có headers, không có body. Browser dùng lại bản cache đã có.

Chiến Lược Đúng Cho Từng Loại Asset

Không phải asset nào cũng cần cùng một cache policy. Đây là decision matrix:

Pattern stale-while-revalidate

Một trong những directive hữu ích nhất nhưng hay bị hiểu sai:

Cache-Control: max-age=60, stale-while-revalidate=300

Cụ thể nó làm gì:

• 60 giây đầu: serve thẳng từ cache, không có network
• Từ 60 đến 360 giây: serve bản cũ ngay lập tức, đồng thời fetch bản mới ở background
• Sau 360 giây: bắt buộc phải revalidate trước khi serve

Kết quả là UI không bao giờ block vì cache miss trong vòng 6 phút, nhưng vẫn đủ fresh.

Những Lỗi Hay Gặp

Cache-Control: no-cache

Cache-Control: max-age=31536000, immutable

Cache-Control: no-store

Cache-Control: max-age=60, stale-while-revalidate=300

Set no-cache trên file JS có hash là lỗi phổ biến nhất. File đó đã có cache-busting built-in trong tên file rồi — thêm no-cache chỉ tạo thêm round trip mỗi lần load trang mà không có lợi gì.

Key Takeaways

• Cache-Control: max-age + immutable là lựa chọn đúng cho hashed static asset. Set một lần, không cần nghĩ lại.
• no-cache có nghĩa là "luôn revalidate", không phải "không cache". Dùng cho HTML.
• no-store chỉ dành cho sensitive data — không phải default cho mọi API route.
• ETag / 304 Not Modified giảm một nửa bandwidth cho resource hay thay đổi.
• stale-while-revalidate là pattern background-refresh — tốt cho public API data.