1. Vì sao caching quan trọng?
Khi người dùng mở một trang web, hàng chục request được gửi đi — tải HTML, JS, CSS, image, API data... Nếu mỗi lần reload đều yêu cầu lại tất cả → app sẽ chậm, tốn băng thông và tiền server.
Caching là kỹ thuật lưu tạm dữ liệu ở những tầng khác nhau (browser, CDN, server) để tăng tốc độ tải và giảm chi phí. Hiểu cách caching hoạt động giúp bạn tối ưu cả UX lẫn cost.
2. Ba lớp caching quan trọng
🔹 1. CDN Caching (Edge Cache)
CDN (Content Delivery Network) là lớp cache ngoài cùng — thường nằm ở các data center khắp thế giới (gọi là edge).
Khi người dùng ở Việt Nam truy cập website host tại Mỹ, CDN sẽ giúp:
- Lưu bản copy của file tĩnh (JS, CSS, image, HTML prerender).
- Tự động phục vụ từ server gần nhất.
Ví dụ: Vercel, Cloudflare, Akamai, Fastly — đều có edge caching.
Header mẫu:
Cache-Control: public, max-age=31536000, immutable
Hoặc trong Next.js:
export const revalidate = 60; // cache HTML 60 giây
👉 Khi nào dùng:
- Static pages, build-time assets, hình ảnh.
- ISR (Incremental Static Regeneration).
🔹 2. API Response Caching
Là caching dữ liệu từ API — có thể thực hiện ở server, edge, hoặc trình duyệt.
Cơ chế:
- Khi client gọi API (
/api/postschẳng hạn), server có thể lưu kết quả vào Redis hoặc memory. - Lần sau gọi lại → trả ra cache thay vì query DB.
Trong Next.js (App Router):
const res = await fetch('https://api.example.com/posts', { next: { revalidate: 300 }, // cache 5 phút
})
Header thực tế:
Cache-Control: s-maxage=300, stale-while-revalidate
👉 Khi nào dùng:
- Dữ liệu ít thay đổi (blog, news feed, product list).
- Khi cần giảm load database.
🔹 3. Service Worker Caching (Browser Cache)
Đây là lớp cache ngay trong trình duyệt người dùng, dùng cho:
- Ứng dụng PWA (Progressive Web App)
- Offline-first experience
- Tăng tốc lần load tiếp theo
Cơ chế: Service Worker chạy nền, có thể “chặn” các request và trả lại dữ liệu đã cache sẵn.
Ví dụ:
self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cached) => { return cached || fetch(event.request) }) )
})
Ưu điểm:
- Dùng offline được.
- Tốc độ tải lại gần như instant.
Nhược điểm:
- Khó quản lý cache invalidation (versioning, update).
- Không phù hợp với dữ liệu realtime.
3. Luồng hoạt động tổng thể
Dưới đây là sơ đồ caching flow trong một ứng dụng web hiện đại:
👤 User ↓
🧠 Service Worker Cache (trình duyệt) ↓
🌍 CDN Edge Cache (Vercel / Cloudflare) ↓
🖥️ Application Server (Next.js) ↓
🧩 API Response Cache (Redis / Memory) ↓
💾 Database
Luồng xử lý:
- User gửi request → Service Worker kiểm tra local cache.
- Nếu không có → gửi đến CDN.
- CDN có bản copy → trả ngay.
- Nếu CDN không có → request tới server (Next.js).
- Server có thể lấy data từ Redis (API cache) hoặc DB.
- Response trả ngược lại, và các tầng trên có thể lưu lại bản cache mới.
4. Các chiến lược kết hợp
| Lớp Cache | Thời gian sống | Dùng cho | Công cụ/Example |
|---|---|---|---|
| Service Worker | Minutes → Days | Static assets, offline mode | Cache API, Workbox |
| CDN Cache | Minutes → Months | JS, CSS, images, prerender HTML | Vercel Edge, Cloudflare |
| API Cache | Seconds → Minutes | JSON data, DB query | Redis, fetch revalidate |
5. Best practices cho frontend dev
✅ Hiểu luồng cache: request có thể dừng ở browser, CDN hoặc server.
✅ Luôn set Cache-Control hợp lý.
✅ Revalidate hoặc purge cache khi data thay đổi.
✅ Dùng stale-while-revalidate để đảm bảo user thấy content nhanh mà vẫn cập nhật nền.
✅ Kết hợp Service Worker cho PWA để có trải nghiệm offline-first.
💡 Kết luận
Caching là “vũ khí bí mật” của hiệu năng web. Nếu bạn hiểu rõ cách mỗi lớp hoạt động — từ Service Worker → CDN → Server → API → DB — bạn sẽ:
- Giảm thời gian phản hồi hàng chục lần,
- Tiết kiệm chi phí server,
- Và tạo trải nghiệm mượt như app native.
“Performance không đến từ code nhanh — mà đến từ việc tránh phải chạy code.”