Next.js App Router giới thiệu một mô hình Caching đa tầng (Multi-layer Caching Architecture) phức tạp nhưng mạnh mẽ, giúp tối ưu hóa từ React Component cho đến CDN.
Việc hiểu sai cơ chế này thường dẫn đến các lỗi phổ biến như dữ liệu cũ (stale data) không chịu update hoặc over-fetching.
1. Caching Topology (4 Lớp Cache)
Hệ thống cache hoạt động như một cái phễu lọc request:
| Lớp Cache | Vị trí | Thời gian sống | Mục đích |
|---|---|---|---|
| 1. Request Memoization | Server (React) | 1 Request | Tránh gọi hàm fetch trùng lặp trong cùng 1 lần render. |
| 2. Data Cache | Server (Next.js) | Persistent | Lưu kết quả API để dùng lại giữa các request và build. |
| 3. Full Route Cache | Server (Next.js) | Persistent | Cache HTML + RSC Payload của trang tĩnh (Static Route). |
| 4. Router Cache | Client (Browser) | Session (30s-5m) | Cache navigation history để chuyển trang tức thì. |
2. Incremental Static Regeneration (ISR)
ISR là sự kết hợp giữa tốc độ của Static Site Generation (SSG) và tính tươi mới của Server-Side Rendering (SSR).
Time-based Revalidation (SWR Pattern)
Sử dụng chiến lược stale-while-revalidate: Trả về cache cũ cho user ngay lập tức, sau đó ngầm fetch data mới để update cache cho user tiếp theo.
// Cache trong 60 giây. Request thứ 2 sau 60s sẽ kích hoạt re-fetch nền.
fetch('https://api.cms.com/posts', { next: { revalidate: 60 } });On-demand Revalidation (Event-driven)
Đây là tiêu chuẩn vàng cho các hệ thống CMS/E-commerce hiện đại. Cache chỉ bị invalid khi dữ liệu thực sự thay đổi (Webhook từ CMS, Admin Action).
- Tagging: Gán nhãn cho các request liên quan.
tsx:
fetch(url, { next: { tags: ['products'] } }); - Invalidation: Gọi hàm
revalidateTagtrong Server Action hoặc Route Handler.tsx:// Gửi lệnh xóa cache cho tất cả fetch có tag 'products' revalidateTag('products');
3. Partial Prerendering (PPR) - The Future
PPR (Next.js 14 Experimental) giải quyết nhược điểm lớn nhất của SSR: Blocking. Trong SSR truyền thống, nếu một phần trang chậm (VD: User Cart), cả trang bị chậm.
Với PPR, Next.js tách trang thành:
- Static Shell (Navbar, Sidebar): Được prerender và cache cứng tại Edge (như SSG).
- Dynamic Holes (Cart, User Info): Được stream về sau song song (như SSR).
Kết quả: TTFB (Time to First Byte) cực thấp, tiệm cận Static Site.
4. Engineering Checklist
- Deduping: Không cần Global Store (Redux) để lưu API response nếu chỉ để tránh fetch lại. Request Memoization đã lo việc này trong 1 render cycle.
- Dynamic Functions: Sử dụng
cookies(),headers()sẽ tự động đưa trang về chế độ Dynamic Rendering (tắt Full Route Cache), nhưng Data Cache vẫn hoạt động. - No-Store: Với dữ liệu realtime nhạy cảm (Private Dashboard), luôn dùng
cache: 'no-store'.
Kết luận
Caching là kỹ thuật khó nhất trong Computer Science. Next.js cung cấp các công cụ mạnh mẽ, nhưng trách nhiệm của Developer là chọn đúng chiến lược (Strategy) cho từng loại dữ liệu.