Sửa rồi mà màn hình không đổi — cache hoạt động thế nào

Bài viết này nói về tình huống sửa rồi mà màn hình không đổi.

Là chuyện bạn sửa code rồi deploy, nhưng mở ra xem thì vẫn y như bản trước.

Nguyên nhân thường không phải ở code, mà là một bản sao cũ vẫn còn nằm đâu đó.

Chỉ mình bạn thấy bản cũ hay tất cả đều thấy bản cũ sẽ cho biết nó còn sót ở đâu.

Cache là gì — trả về bản sao đã giữ lại thay vì đi lấy

Cache (cơ chế giữ thứ đã lấy về một lần ở gần đó, rồi từ lần sau trả về chính nó thay vì đi lấy) sinh ra là để bạn không phải đi lấy cùng một thứ nhiều lần.

Thứ đã lấy về một lần được giữ sẵn tại máy, và từ lần thứ hai trở đi thì dùng chính nó.

Đổi lại tốc độ là một khoảng thời gian mà nó không nhận ra là đã có bản mới.

Khoảng thời gian giữ lại đó là thời hạn hiệu lực (max-age, khoảng thời gian được phép dùng bản sao đã giữ mà không đi lấy lại).

Cho đến khi thời hạn hiệu lực hết, dù bạn có sửa trên server thì bản sao tại máy vẫn tiếp tục được dùng.

Thứ càng ít thay đổi như ảnh và CSS thì càng được đặt thời hạn dài hơn.

Có khoảng thời gian sửa rồi mà không đổi là vì thời hạn hiệu lực chưa hết.

Cache là cơ chế trả về bản sao cũ

Cache là cơ chế giữ thứ đã lấy về một lần ở gần đó, rồi từ lần sau trả về chính nó.

Không phải đi lấy mỗi lần nên nhanh hơn, nhưng trong khoảng đó phía server có bản mới thì nó cũng không nhận ra, thành ra mới có tình trạng sửa rồi mà không đổi.

Ba chỗ bản sao được đặt — trong máy bạn, trên đường phân phối và trong server

Chỗ đặt bản sao không chỉ có một.

Có 3 chỗ, xếp lồng nhau, tính từ gần người dùng ra ngoài.

Chỗ trong cùng, bản sao mà chính trình duyệt của bạn giữ, là cache trình duyệt (browser cache).

Chỗ thứ hai là CDN (Content Delivery Network, cơ chế đặt bản sao ở chỗ gần người dùng rồi phân phát từ đó), và nó có sẵn trong nhiều nơi deploy ngay từ đầu.

Ba chỗ này khác nhau cả ở cách xóa lẫn ở phạm vi tác dụng.

Thao tác bắt xóa bản sao của CDN là purge (xóa bản sao mà cơ chế phân phối đang giữ, bắt nó đi lấy lại).

Cũng có nơi được đặt để tự purge sau mỗi lần deploy.

Tải lại bắt buộc là gì

Với thao tác tải lại thông thường, có khi bản sao tại máy vẫn được dùng nguyên.

Thao tác bắt lấy lại được gọi là hard reload (tải lại bắt buộc), và nếu chỉ để kiểm tra thì mở trang trong cửa sổ không lưu lịch sử cũng cho kết quả như vậy.

Khoanh vùng theo chuyện chỉ mình bạn thấy bản cũ hay tất cả đều thấy

Thay vì thử lần lượt 3 chỗ từ trên xuống, xác định phạm vi trước thì xong nhanh hơn.

Thứ bạn nhìn là người khác ngoài bạn có thấy bản cũ hay không.

Nếu chỉ mình bạn thì nguyên nhân không ở đâu khác ngoài trình duyệt của bạn.

Nếu người khác cũng thấy bản cũ thì bạn có tải lại tại máy bao nhiêu lần cũng không đổi.

Dưới cùng là trường hợp ngay từ đầu file mới còn chưa tới được server công khai.

Nếu build hỏng thì thứ đang công khai vẫn là bản build trước.

Tải lại mà hết lỗi thì chưa chắc đã xong

Tải lại tại máy bạn thì bạn thấy bản mới, nhưng đó chỉ là bản sao trên đúng một máy của bạn được thay.

Trên thiết bị của người dùng, bản sao cũ còn nguyên cho đến khi thời hạn hiệu lực hết.

Đổi tên file thì bản sao cũ không còn được dùng

Thay vì đi xóa từng chỗ, có cách làm cho bản sao cũ ngay từ đầu không được dùng đến.

Đó là khi đổi nội dung thì đổi luôn cả tên file.

Nếu thay một phần tên file bằng chuỗi ký tự tính ra từ nội dung, cứ mỗi lần nội dung đổi là tên cũng đổi theo.

Tên đã khác thì bản sao tại máy là một file khác nên không được dùng.

Việc đặt tên này được làm tự động lúc build.

Bạn không cần tự nghĩ ra tên.

Riêng index.html là cửa vào thì không đổi tên được, nên bạn đặt thời hạn hiệu lực ngắn cho nó.

Một khi tên các file mà nó tải vào đã là tên mới, thì từ đó trở đi bản mới tự động tới nơi.

Tìm thấy ở chỗ gần hơn là nó không đi tiếp ra ngoài để lấy nữa.

Vì vậy chỉ cần một chỗ còn sót bản sao cũ là bản mới không tới nơi.

Đổi tên chắc ăn hơn là đi xóa từng chỗ

Nếu đổi nội dung mà tên file cũng đổi theo thì bản sao tại máy là một file khác nên không được dùng.

Việc đặt tên này do build làm tự động, nên bạn chỉ cần đặt thời hạn hiệu lực ngắn cho riêng file cửa vào không đổi tên được.