Giữ cho mọi thứ luôn mới bằng tính năng cũ trong khi xác thực lại

Một công cụ bổ sung giúp bạn cân bằng giữa tính tức thời và tính mới mẻ khi phân phát ứng dụng web.

Jeff Posnick

Sản phẩm nào đã được vận chuyển?

stale-while-revalidate giúp nhà phát triển cân bằng giữa tính tức thì (tải nội dung đã lưu vào bộ nhớ đệm ngay lập tức) và tính mới mẻ (đảm bảo các bản cập nhật cho nội dung đã lưu vào bộ nhớ đệm sẽ được sử dụng trong tương lai). Nếu bạn duy trì một dịch vụ web hoặc thư viện của bên thứ ba cập nhật theo lịch biểu thông thường hoặc các thành phần của bên thứ nhất có xu hướng có thời gian hoạt động ngắn, thì stale-while-revalidate có thể là một phần bổ sung hữu ích cho các chính sách lưu vào bộ nhớ đệm hiện có của bạn.

Tính năng hỗ trợ đặt stale-while-revalidate cùng với max-age trong tiêu đề phản hồi Cache-Control có trong Chrome 75 và Firefox 68.

Các trình duyệt không hỗ trợ stale-while-revalidate sẽ tự động bỏ qua giá trị cấu hình đó và sử dụng max-age, như tôi sẽ giải thích ngay sau đây…

Điều này có nghĩa là gì?

Hãy chia stale-while-revalidate thành hai phần: ý tưởng rằng phản hồi được lưu vào bộ nhớ đệm có thể đã cũ và quy trình xác thực lại.

Trước tiên, làm cách nào để trình duyệt biết liệu phản hồi được lưu vào bộ nhớ đệm có "cũ" hay không? Tiêu đề phản hồi Cache-Control chứa stale-while-revalidate cũng phải chứa max-age và số giây được chỉ định qua max-age là yếu tố xác định độ cũ. Mọi phản hồi được lưu vào bộ nhớ đệm mới hơn max-age đều được coi là mới và các phản hồi cũ hơn được lưu vào bộ nhớ đệm là cũ.

Nếu phản hồi được lưu vào bộ nhớ đệm cục bộ vẫn còn mới, thì phản hồi đó có thể được sử dụng nguyên trạng để thực hiện yêu cầu của trình duyệt. Theo quan điểm của stale-while-revalidate, bạn không cần làm gì trong trường hợp này.

Tuy nhiên, nếu phản hồi được lưu vào bộ nhớ đệm đã cũ, thì một quy trình kiểm tra khác dựa trên tuổi sẽ được thực hiện: tuổi của phản hồi được lưu vào bộ nhớ đệm có nằm trong khoảng thời gian bổ sung do chế độ cài đặt stale-while-revalidate cung cấp không?

Nếu tuổi của một phản hồi cũ nằm trong khoảng thời gian này, thì phản hồi đó sẽ được dùng để đáp ứng yêu cầu của trình duyệt. Đồng thời, yêu cầu "xác thực lại" sẽ được gửi đến mạng theo cách không làm chậm việc sử dụng phản hồi được lưu vào bộ nhớ đệm. Phản hồi được trả về có thể chứa thông tin giống như phản hồi đã lưu vào bộ nhớ đệm trước đó hoặc có thể khác. Dù bằng cách nào, phản hồi của mạng cũng được lưu trữ cục bộ, thay thế mọi nội dung đã lưu vào bộ nhớ đệm trước đó và đặt lại bộ hẹn giờ "độ mới" được dùng trong mọi phép so sánh max-age trong tương lai.

Tuy nhiên, nếu phản hồi đã lưu vào bộ nhớ đệm cũ đến mức nằm ngoài khoảng thời gian stale-while-revalidate, thì phản hồi đó sẽ không đáp ứng yêu cầu của trình duyệt. Thay vào đó, trình duyệt sẽ truy xuất phản hồi từ mạng và sử dụng phản hồi đó để vừa thực hiện yêu cầu ban đầu vừa điền phản hồi mới vào bộ nhớ đệm cục bộ.

Ví dụ thực tế

Dưới đây là ví dụ đơn giản về một API HTTP để trả về thời gian hiện tại, cụ thể hơn là số phút hiện tại sau giờ.

Trong trường hợp này, máy chủ web sử dụng tiêu đề Cache-Control này trong phản hồi HTTP:

Cache-Control: max-age=1, stale-while-revalidate=59

Chế độ cài đặt này có nghĩa là nếu yêu cầu về thời gian được lặp lại trong vòng 1 giây tiếp theo, thì giá trị được lưu vào bộ nhớ đệm trước đó vẫn sẽ mới và được sử dụng nguyên trạng mà không cần xác thực lại.

Nếu một yêu cầu được lặp lại sau từ 1 đến 60 giây, thì giá trị được lưu vào bộ nhớ đệm sẽ cũ nhưng vẫn được dùng để thực hiện yêu cầu API. Đồng thời, "trong nền", một yêu cầu xác thực lại sẽ được thực hiện để điền vào bộ nhớ đệm một giá trị mới để sử dụng trong tương lai.

Nếu một yêu cầu được lặp lại sau hơn 60 giây, thì phản hồi cũ sẽ không được sử dụng và cả việc thực hiện yêu cầu của trình duyệt lẫn việc xác thực lại bộ nhớ đệm đều sẽ phụ thuộc vào việc nhận được phản hồi từ mạng.

Sau đây là thông tin chi tiết về 3 trạng thái riêng biệt này, cùng với khoảng thời gian áp dụng cho từng trạng thái trong ví dụ của chúng ta:

Sơ đồ minh hoạ thông tin trong phần trước.

Các trường hợp sử dụng phổ biến là gì?

Mặc dù ví dụ trên về dịch vụ API "phút sau giờ" là giả định, nhưng ví dụ này minh hoạ trường hợp sử dụng dự kiến – các dịch vụ cung cấp thông tin cần được làm mới, nhưng có thể chấp nhận một mức độ cũ nhất định.

Ví dụ ít phức tạp hơn có thể là một API cho điều kiện thời tiết hiện tại hoặc các tiêu đề tin tức hàng đầu được viết trong giờ qua.

Nhìn chung, mọi phản hồi cập nhật theo một khoảng thời gian đã biết, có khả năng được yêu cầu nhiều lần và ở trạng thái tĩnh trong khoảng thời gian đó đều là lựa chọn phù hợp để lưu vào bộ nhớ đệm ngắn hạn thông qua max-age. Việc sử dụng stale-while-revalidate ngoài max-age sẽ tăng khả năng các yêu cầu trong tương lai có thể được thực hiện từ bộ nhớ đệm với nội dung mới hơn mà không chặn phản hồi mạng.

API này tương tác với trình chạy dịch vụ như thế nào?

Nếu bạn đã nghe nói về stale-while-revalidate, thì có thể là trong bối cảnh công thức được dùng trong một trình chạy dịch vụ.

Việc sử dụng stale-while-revalidate thông qua tiêu đề Cache-Control có một số điểm tương đồng với việc sử dụng trong trình chạy dịch vụ và nhiều điểm cân nhắc tương tự về sự đánh đổi độ mới và thời gian hoạt động tối đa. Tuy nhiên, bạn nên cân nhắc một số điều khi quyết định nên triển khai phương pháp dựa trên trình chạy dịch vụ hay chỉ dựa vào cấu hình tiêu đề Cache-Control.

Sử dụng phương pháp trình chạy dịch vụ nếu…

  • Bạn đang sử dụng một trình chạy dịch vụ trong ứng dụng web của mình.
  • Bạn cần kiểm soát chi tiết nội dung của bộ nhớ đệm và muốn triển khai một chính sách hết hạn như chính sách ít được sử dụng gần đây nhất. Mô-đun Hết hạn bộ nhớ đệm của Workbox có thể giúp bạn thực hiện việc này.
  • Bạn muốn được thông báo khi một phản hồi cũ thay đổi trong nền trong bước xác thực lại. Mô-đun Broadcast Cache Update (Cập nhật bộ nhớ đệm truyền tin) của Workbox có thể giúp bạn thực hiện việc này.
  • Bạn cần có hành vi stale-while-revalidate này trong tất cả trình duyệt hiện đại.

Sử dụng phương pháp Cache-Control nếu…

  • Bạn không muốn tốn công sức triển khai và duy trì một trình chạy dịch vụ cho ứng dụng web của mình.
  • Bạn có thể cho phép trình duyệt tự động quản lý bộ nhớ đệm để ngăn bộ nhớ đệm cục bộ của bạn tăng quá lớn.
  • Bạn có thể sử dụng một phương pháp hiện không được hỗ trợ trong tất cả các trình duyệt hiện đại (tính đến tháng 7 năm 2019; khả năng hỗ trợ có thể tăng lên trong tương lai).

Nếu bạn đang sử dụng một trình chạy dịch vụ và cũng đã bật stale-while-revalidate cho một số phản hồi thông qua tiêu đề Cache-Control, thì trình chạy dịch vụ thường sẽ có "lần đầu tiên" phản hồi một yêu cầu. Nếu trình chạy dịch vụ quyết định không phản hồi hoặc nếu trong quá trình tạo phản hồi, trình chạy dịch vụ đưa ra yêu cầu mạng bằng fetch(), thì hành vi được định cấu hình thông qua tiêu đề Cache-Control sẽ có hiệu lực.

Tìm hiểu thêm