BFCache (Back/Forward Cache) là gì? Cách tối ưu cho website nạp tức thì khi ấn nút Back

Một thao tác phổ biến của người dùng khi lướt web: Đọc xong một bài viết và **nhấn nút Quay lại (Back)** để trở về danh sách bài viết. Nếu trang danh sách phải mất 2-3 giây để tải lại từ đầu, khách hàng sẽ rất khó chịu. Công nghệ BFCache (Back/Forward Cache) giúp trang quay lại **nạp tức thì 0ms** như lật sách!

1. BFCache hoạt động như thế nào?

BFCache không chỉ lưu trữ các file tĩnh mà **lưu trữ toàn bộ ảnh chụp trạng thái bộ nhớ RAM của trang web (bao gồm cả JS Heap và DOM State)**. Khi người dùng bấm nút Back hay Forward, trình duyệt chỉ đơn giản là lôi lại trang web từ RAM ra mà KHÔNG cần gửi bất kỳ yêu cầu (Request) nào tới Server!

2. 3 Nguyên nhân phổ biến khiến website MẤT BFCache

1. Sử dụng sự kiện unload cũ kỹ

Việc gắn window.addEventListener('unload', ...) sẽ khiến trình duyệt vô hiệu hóa hoàn toàn BFCache trên trang đó. Cách khắc phục: Thay thế bằng sự kiện pagehide.

2. Thẻ Header Cache-Control chứa no-store

Nếu server trả về header Cache-Control: no-store, trình duyệt sẽ không lưu trang vào BFCache.

3. Các kết nối WebSocket hoặc Fetch request chưa đóng

Các kết nối mở dở dở dang dang sẽ ngăn cản trình duyệt đưa trang vào trạng thái "đóng đóng băng" (Frozen state) trong BFCache.

3. Kiểm tra tính khả thi BFCache bằng Chrome DevTools

Mở F12 DevTools → Application tab → Back/forward cache → Nhấn nút Test back/forward cache để kiểm tra xem trang web của bạn có đủ điều kiện lưu BFCache hay không.

Kết luận

Tối ưu BFCache mang lại trải nghiệm điều hướng mượt mà và tiết kiệm đáng kể tài nguyên máy chủ. Uwmee Software loại bỏ mọi tác vụ ngăn cản BFCache giúp website Next.js nạp tức thì khi quay lại trang. Đọc thêm bài viết tối ưu Core Web Vitals.