Cách cache phản hồi API + cache trang web

Bạn có lẽ đã nhiều lần gặp phải trường hợp khi nhấn nút Quay lại trên trang web, trang đã được tải trước đó lại được tải lại.

Ví dụ, trên một trang web mua sắm, sau khi nhấp vào sản phẩm hiển thị trong kết quả tìm kiếm, khi nhấn nút Quay lại,

tìm kiếm lại diễn ra.

Việc phải tải lại trang đã được tải trước đó không chỉ gây ảnh hưởng xấu đến trải nghiệm người dùng (UX) mà còn gây ra những vấn đề lớn hơn về hệ thống.

Việc tải lại trang dẫn đến việc gọi API không cần thiết, làm tăng lưu lượng truy cập.

Điều này có thể dẫn đến các vấn đề về chi phí, và nếu trang web đang thu thập dữ liệu, nó cũng có thể dẫn đến việc thu thập dữ liệu quá mức.

Để giải quyết vấn đề này, việc sử dụng bộ nhớ đệm (caching) cho trang hoặc kết quả API sẽ mang lại hiệu quả đáng kể.

1. Sử dụng bộ nhớ lưu trữ của trình duyệt (localStorage, SessionStorage, IndexedDB)

- localStorage lưu giữ dữ liệu ngay cả khi trình duyệt đóng.

- sessionStorage sẽ xóa dữ liệu khi trình duyệt hoặc tab đóng.

- IndexedDB được sử dụng để lưu trữ dữ liệu lớn. Nó có thể lưu trữ dữ liệu không đồng bộ và là NoSql. Có thể lưu trữ cả hình ảnh và video. Dung lượng tối đa khác nhau tùy thuộc vào trình duyệt, nhưng khoảng 50mb. Có thể sử dụng cả khi offline.

2. Axios Interceptor

Nếu sử dụng axios, bạn có thể sử dụng interceptor tích hợp sẵn. Đối với cùng một yêu cầu, nó sẽ trả về phản hồi mà không gửi đến máy chủ.

Sử dụng bộ nhớ đệm trong framework Nuxt

Bằng cách bao bọc một thành phần nào đó bằng thẻ keep-alive, bạn có thể lưu trữ thành phần đó vào bộ nhớ đệm.

Bạn có thể thiết lập xem có gọi fetch() trong quá trình render phía máy chủ hay không. Nếu là false, fetch chỉ được gọi ở phía client.

Cũng có thể sử dụng Vuex. Nguyên lý hoạt động tương tự như bộ nhớ lưu trữ của trình duyệt.

Có thể sử dụng web server (Nginx) để đặt cấu hình bộ nhớ đệm trong header phản hồi.

Tuy nhiên, do bộ nhớ đệm nên việc triển khai các tài nguyên như hình ảnh có thể không được áp dụng ngay lập tức, trong trường hợp này, cần phải vô hiệu hóa bộ nhớ đệm. Có thể đổi tên tệp, thêm yêu cầu vô hiệu hóa bộ nhớ đệm hoặc sử dụng AWS CloudFront để vô hiệu hóa bộ nhớ đệm.

Cũng có phương pháp lưu trữ chính các trang được render từ máy chủ Nuxt vào bộ nhớ đệm.

Đây là bộ nhớ đệm phía máy chủ, không chỉ API mà toàn bộ trang được lưu trữ vào bộ nhớ đệm. Nói cách khác, khi nhấn nút Quay lại, trang sẽ được tải ngay lập tức mà không bị chậm trễ. Hiệu suất rất cao nhưng cần lưu ý vì nó sử dụng bộ nhớ máy chủ.

Nếu 10.000 người dùng yêu cầu cùng một trang,

Người dùng đầu tiên yêu cầu sẽ render trang và lưu vào bộ nhớ đệm.

9.999 người dùng tiếp theo truy cập cùng một trang, máy chủ sẽ trả về kết quả từ bộ nhớ đệm.

-> Phương pháp này không phù hợp nếu cần hiển thị dữ liệu được cá nhân hóa cho từng người dùng.

+ cache bên trong sử dụng gói lru-cache.

* lru: Thuật toán bộ nhớ đệm ưu tiên loại bỏ dữ liệu lâu nhất không được sử dụng.

Sử dụng cấu trúc dữ liệu hashmap hoặc danh sách liên kết kép để tìm kiếm nhanh chóng cặp khóa-giá trị: độ phức tạp thời gian O(1).