Hướng dẫn header Cache-Control trong HTTP

[Dev Pro]

Header Cache-Control là công cụ quan trọng để điều khiển cách trình duyệt và các bộ nhớ đệm trung gian lưu trữ nội dung web. Thiết lập hợp lý giúp giảm thời gian tải, giảm tải máy chủ và cải thiện trải nghiệm người dùng.

Tổng quan về bộ nhớ đệm HTTP​

HTTP caching lưu các bản sao tài nguyên (HTML, ảnh, script...) gần người dùng hơn — trong trình duyệt hoặc các bộ nhớ đệm trung gian như proxy và CDN. Khi tài nguyên được cache, trình duyệt có thể phục vụ bản sao mà không cần truy vấn máy chủ gốc, giúp phản hồi nhanh hơn và giảm tải.

Vai trò của header Cache-Control​

Cache-Control là header quan trọng nhất để điều khiển hành vi lưu trữ. Bạn có thể kết hợp nhiều chỉ thị trong một header, ví dụ: Cache-Control: max-age=3600, public. Dưới đây là các chỉ thị phổ biến và cách dùng thực tế.

no-store​

Chức năng: Yêu cầu trình duyệt và mọi bộ nhớ đệm không lưu bất kỳ bản sao nào của tài nguyên.
Khi dùng: Dành cho dữ liệu nhạy cảm hoặc thay đổi liên tục, ví dụ trang chứa thông tin cá nhân, quy trình thanh toán hoặc dữ liệu tài chính.
Ví dụ: Cache-Control: no-store

no-cache​

Chức năng: Không phải “không được cache” mà là phải xác thực lại với máy chủ trước khi dùng bản cache. Cache có thể lưu nhưng phải revalidate trước khi sử dụng.
Khi dùng: Nội dung thay đổi thường xuyên nhưng vẫn có lợi khi lưu tạm; phù hợp với trang tin động, dữ liệu thời gian thực cần đảm bảo tính tươi mới.
Ví dụ: Cache-Control: no-cache

private​

Chức năng: Cho phép lưu trong cache của trình duyệt cá nhân nhưng không được lưu trong cache chia sẻ (CDN/proxy).
Khi dùng: Nội dung dành cho từng người dùng sau khi đăng nhập, dữ liệu tùy biến cá nhân.
Ví dụ: Cache-Control: private, max-age=300

public​

Chức năng: Đánh dấu rằng tài nguyên có thể lưu trong mọi loại cache, bao gồm CDN và proxy chia sẻ.
Khi dùng: Tài nguyên không cá nhân, giống nhau cho mọi người, như ảnh hoặc thư viện JS bên thứ ba.
Ví dụ: Cache-Control: public, max-age=86400

max-age​

Chức năng: Xác định thời hạn (tính bằng giây) mà tài nguyên được coi là còn “tươi” và có thể dùng mà không cần revalidate.
Khi dùng: Với tài nguyên ít thay đổi, đặt thời gian dài (hàng ngày/hàng tuần); với trang chủ hoặc tin tức, đặt ngắn hơn (vài phút đến vài chục phút).
Ví dụ: Cache-Control: max-age=3600

s-maxage​

Chức năng: Tương tự max-age nhưng chỉ áp dụng cho cache chia sẻ (CDN/proxy).
Khi dùng: Khi bạn muốn CDN lưu lâu hơn trình duyệt, ví dụ: Cache-Control: public, max-age=600, s-maxage=3600
Ví dụ: Cache-Control: public, max-age=600, s-maxage=3600

max-age=0​

Chức năng: Buộc cache phải revalidate với server mỗi lần. Tương tự no-cache nhưng có thể cho phép dùng bản cũ nếu server không truy cập được (tùy triển khai).
Khi dùng: Nội dung cần luôn kiểm tra tính mới nhưng có thể chấp nhận dùng tạm khi server không trả lời.
Ví dụ: Cache-Control: max-age=0

must-revalidate​

Chức năng: Khi tài nguyên đã hết hạn, cache bắt buộc phải xác thực với server trước khi phục vụ; không được phục vụ nội dung cũ.
Khi dùng: Nội dung mà dữ liệu cũ gây tác hại (giá, đơn hàng, thông tin người dùng).
Ví dụ: Cache-Control: max-age=3600, must-revalidate

immutable​

Chức năng: Thông báo cho trình duyệt rằng nội dung sẽ không thay đổi, do đó trình duyệt không cần revalidate ngay cả khi người dùng reload.
Khi dùng: Tài nguyên tĩnh đặt tên theo cơ chế cache-busting (ghi kèm hash/version trong URL). Rất tốt cho file JS/CSS có fingerprint.
Ví dụ: Cache-Control: public, max-age=31536000, immutable

stale-while-revalidate​

Chức năng: Cho phép cache phục vụ bản cũ trong khi song song revalidate ở nền để cập nhật cho lần sau, giúp giảm độ trễ cho người dùng.
Khi dùng: Nội dung có thể tạm chấp nhận ít lỗi nhỏ trong một khoảng thời gian ngắn trong khi cập nhật phía sau.
Ví dụ: Cache-Control: public, max-age=3600, stale-while-revalidate=30

Revalidation và mã 304​

Khi cache revalidate, server có thể trả về 304 Not Modified nếu nội dung không thay đổi — trong trường hợp này server chỉ gửi header mà không gửi lại toàn bộ nội dung, giúp tiết kiệm băng thông.

Gợi ý triển khai​

• Phân loại tài nguyên: tĩnh (ảnh, JS, CSS) dùng max-age dài + immutable; động cá nhân dùng private hoặc no-store/no-cache.
• Dùng s-maxage để cho CDN lưu lâu hơn trình duyệt nếu cần giảm tải server.
• Sử dụng cache-busting (hash/version trong tên file) cho tài nguyên tĩnh để an toàn khi đặt thời gian cache dài.
• Kiểm tra header thực tế bằng công cụ kiểm tra tốc độ hoặc xem phần Header của từng request để đảm bảo server trả đúng Cache-Control.

Kết luận​

Thiết lập Cache-Control phù hợp là cách hiệu quả để tối ưu hiệu suất và trải nghiệm người dùng. Hãy cân nhắc loại nội dung và rủi ro dữ liệu cũ khi chọn chỉ thị, kết hợp revalidation và fingerprinting để có chiến lược cache an toàn và hiệu quả.

Nguồn: https://www.debugbear.com/docs/http-cache-control-header