Kỹ thuật caching

Caching thì bao gồm nhiều vấn đề, bài viết này nêu ra một số cách điều khiển cache ảnh ở trình duyệt của người dùng.

- Bài toán: Tôi có 5 chuyên mục, mỗi chuyên mục có một hình ảnh đại diện (thumbnail) riêng. Khi tôi upload ảnh đại diện mới cho một chuyên mục thì người dùng phải nhấn Ctrl + F5 mới thấy ảnh chuyên mục thay đổi.

- Nguyên nhân:
+ Khi truy cập lần đầu tiên, trình duyệt gửi HTTP request lên lấy ảnh đại diện của chuyên mục C1 là /c1.jpg
+ Khi truy cập lần hai (sau khi người quản trị upload ảnh đại diện mới), trình duyệt thấy /c1.jpg đã có dữ liệu yêu cầu trước đó nên không đòi server nữa.

- Giải pháp:
+ Cách 1: Thay vì gửi về ảnh c1.jpg, mỗi lần ta gửi về c1.jpg?random_string để đánh lừa trình duyệt không cache nữa vì URI khác, tạo một request mới lên server. Nếu random_string này mỗi lần lại một khác nhau thì không tận dụng được tính năng cache ảnh trên trình duyệt rồi. Vậy nên cái random_string này phải tạo ra theo nguyên tắc: chỉ thay đổi khi có ảnh đại diện mới được upload. Vậy có thể tạo thêm một trường version ở bảng chuyên mục, sau đó mỗi lần render ra thì ghép tên file ảnh với chỉ số version đó. Mỗi khi upload ảnh thành công thì ta thay đổi giá trị version. Trường hợp bảng có trường thời gian cập nhật thì ta có thể sử dụng giá trị này thay cho cột version. Ví dụ: c1.jpg?t=561682800

+ Cách 2: Mỗi lần thay ảnh đại diện thì ta thay luôn cả trường tên file. Tên file có thể viết hàm tự sinh mà đảm bảo tính chất unique "tương đối", thậm chí tuyệt đối như UUID!

- Mở rộng: Cách thức thêm phần query string vào URI để điều khiển cache này có thể áp dụng trong các trường hợp tương tự, ví dụ như: cập nhật avatar của người dùng, ảnh minh họa của tin bài/sản phẩm; hay chính các file static (tĩnh) CSS, JS của site (thêm version vào config, mỗi lần commit thì thay đổi giá trị này --> home.css?v=1.2, main.js?v=1.2)