Trung BìnhSystem Design iconSystem Design

Caching strategies cho frontend app?

Có nhiều tầng caching cho frontend application, mỗi tầng phục vụ mục đích khác nhau. Tầng trình duyệt dùng HTTP headers như Cache-Control và ETag để cache tài nguyên tĩnh (JS, CSS, images), giúp giảm network requests khi user quay lại trang.

Tầng ứng dụng dùng React Query hoặc SWR với chiến lược stale-while-revalidate để cache dữ liệu API — hiển thị data cũ ngay lập tức rồi cập nhật phía sau, mang lại trải nghiệm nhanh cho user. Service Worker cho phép xây dựng ứng dụng offline-first bằng cách cache resources trong Cache API.

Ngoài ra còn localStorage cho user preferences, SessionStorage cho form drafts tạm thời, IndexedDB cho tập dữ liệu lớn cần truy vấn, và CDN cho static assets giúp giảm latency theo vùng địa lý.

Xem toàn bộ System Design cùng filter theo level & chủ đề con.

Mở danh sách System Design