Static cache là gì?

Static ở đây là chỉ static files như: ảnh, js, css, font, những file text hoặc binary mà content của nó “tĩnh”.
Cache là một thuật ngữ trong computer science để chỉ việc lưu lại dữ liệu vào một bộ nhớ tạm (RAM hoặc disk) để giảm thời gian truy xuất vào những lần sau.

Ví dụ về cache

Một ví dụ đơn giản để bạn hiểu hơn về cache, giả sử bạn cache response của một HTTP request vào memory thì nó sẽ như sau:

const cache = {};
function getAndCache(url) {
  if (cache[url]) return Promise.resolve(cache[url]); // check cache
  return axios.get(url).then(res => {
    cache[url] = res.data; // nhét vào cache
    return cache[url];
  });
}

Xem đoạn code trên bạn thấy là ở lần request thứ 2, dữ liệu đã có sẵn -> trả về ngay mà không phải tải url lại.

Chú ý:
– Nếu content của url thường xuyên thay đổi -> không nên cache
– Cách này tiết kiệm thời gian, tuy nhiên tốn memory vì phải store kết quả vào biến cache.

Sẽ có một bài riêng nói về Cache cụ thể hơn.

Static cache

Khi trình duyệt request một file nào đó ở server, nếu server trả về response header Cache-Control kèm theo max-age với một giá trị số x nào đó như hình dưới thì có nghĩa là server đang “bảo” browser là: Hãy cache file này lại trong vòng x giây, nếu người dùng tải lại trong vòng x giây tới thì hãy đưa cho họ bản cache thay vì request lên server.

Thường thì browser sẽ lưu bản cache vào một nơi nào đó trên disk, tuỳ browser mà location khác nhau.

Lần sau bạn tải lại sẽ thấy ở tab Network, cột Size (disk cache). Do được load từ disk nên Time sẽ rất nhỏ, cỡ 1-2ms.

Force reload

Sau lần tải đầu tiên, nếu file được cache, bạn Reload trình duyệt bao nhiêu lần thì cũng chỉ nhận được bản cache ở disk. Nếu file đó trên server đã thay đổi thì bạn cần phải force reload bằng cách giữ Shift và click Reload ở trình duyệt hoặc Shift + F5 ở Windows, hoặc Cmd + Shift + R ở Mac. Lúc này trình duyệt sẽ bỏ qua bản cache và tải các resource từ server về.

Thực tế

Giả sử bạn có một Express server, bạn serve static ở folder public, trong đó bạn để file main.js, có sử dụng Cache-Control. Giả sử lần deploy sau bạn có sửa đổi file đó, người dùng sẽ phải Shift + Reload để tải lại file?

Trong thực tế, trước khi deploy, các file js trong project sẽ được trải qua một quá trình build, bởi các build tool như webpack, các tool này sẽ:
– Gộp (concat) tất cả các file js lại (hoặc chia thành nhiều “bundle” nếu dùng code splitting)
– Minify chúng (bỏ các dấu xuống dòng, khoảng trống có thể bỏ, đổi tên biến thành các ký tự ngắn để giảm size của file)
– Thêm một đoạn hash vào trước phần đuôi, ví dụ main.abcxyz.js, content của file khác nhau thì đoạn hash này cũng khác nhau.

Lúc này ta có thể đảm bảo nếu nội dung file khác nhau thì tên file cũng khác -> một file static có thể cache forever mà không sợ bị out of date.