Caching trong NextJS hoạt động như thế nào

Chào mọi người, lại là Slao đây!

Bài viết này sẽ giúp chúng ta hiểu rõ hơn về cơ chế cached của Next.js.

🔥 Có 4 cơ chế caching trong Next.js

1️⃣ Request Memoization

Request Memoization là cơ chế phổ biến nhất. Trong một trang web, có thể có nhiều component cần sử dụng cùng một dữ liệu, Next.js sẽ chỉ fetch một lần duy nhất.

📌 Ví dụ:

Một component hiển thị thông tin người dùng.
Một component khác hiển thị số lượng bài viết của người dùng đó.
Một component khác nữa hiển thị avatar của người dùng.

Thay vì mỗi component tự fetch dữ liệu từ server một cách độc lập, bạn có thể tối ưu bằng cách fetch dữ liệu một lần và chia sẻ kết quả cho tất cả các component cần dùng.

⚙️ Cách hoạt động:

Khi sử dụng React Query, SWR, hoặc fetch API trong Next.js, dữ liệu chỉ fetch một lần và lưu vào bộ nhớ đệm (cache).
Các component khác nhau sẽ sử dụng cùng một bản sao dữ liệu từ cache thay vì gọi API nhiều lần.

✅ Lợi ích của Request Memoization:

✔ Giảm số lượng request đến server.

✔ Tăng tốc độ tải trang.

✔ Đảm bảo tính nhất quán của dữ liệu giữa các component.

Cache này chỉ tồn tại trong phạm vi của một request (một lần tải trang). Khi người dùng tải lại trang hoặc chuyển sang trang khác, cache sẽ bị xóa.

2️⃣ Data Cached

🔹 Data Cache là gì?

Data Cache là một bộ nhớ đệm (cache) trên server, lưu trữ kết quả của các yêu cầu fetch.

⚙️ Cách hoạt động:

Khi gọi fetch(), Next.js kiểm tra xem dữ liệu có trong Data Cache chưa.
Nếu có, nó sẽ sử dụng dữ liệu từ cache thay vì fetch lại từ nguồn dữ liệu.
Nếu chưa có, Next.js sẽ fetch từ nguồn, lưu vào cache và sử dụng nó.

✅ Lợi ích của Data Cache:

✔ Tăng tốc độ ứng dụng: Giảm thời gian fetch dữ liệu.

✔ Giảm tải cho database hoặc API: Ít request hơn.

✔ Tiết kiệm tài nguyên: Dữ liệu chia sẻ giữa nhiều người dùng.

🔧 Kiểm soát Data Cache:

Theo mặc định, Data Cache vô thời hạn.
Có thể kiểm soát bằng cách thiết lập revalidation hoặc tắt cache hoàn toàn.

// Cache the data, but revalidate it after one hour
fetch('https://api.example.com/data', { next: { revalidate: 3600 } })

// Don't cache this data at all
fetch('https://api.example.com/data', { cache: 'no-store' })

3️⃣ Full Route Cache

Next.js không chỉ cache data, mà còn cache toàn bộ trang đã được render, bao gồm:

HTML của trang (tạo từ quá trình render).
React Server Component Payload (biểu diễn nhỏ gọn của các Server Component trong trang).

🚀 Khi một trang được cache, Next.js không cần phải render lại trang đó mỗi lần truy cập, giúp tải trang nhanh hơn.

4️⃣ Route Cache

Khi người dùng điều hướng giữa các trang, Next.js lưu các trang đã truy cập trước đó vào cache trên trình duyệt.
Cache này tồn tại trong suốt session của người dùng và bị xóa khi họ refresh trang.

📌 Ví dụ cách hoạt động của Cache

🛠 Bước 1 (Build): Next.js render tĩnh trang blog và lưu vào Full Route Cache.

🔍 Bước 2 (Fetch dữ liệu): Khi người dùng truy cập trang blog, Next.js fetch dữ liệu bài viết và lưu vào Data Cache.

🎨 Bước 3 (Render): Nếu nhiều component cần cùng một dữ liệu, Next.js sử dụng Request Memoization để fetch chỉ một lần.

🔄 Bước 4 (Điều hướng): Khi người dùng chuyển trang, Next.js lưu nội dung trang vào Router Cache, giúp người dùng quay lại trang nhanh hơn.

📢 Tóm lại:

Request Memoization: Fetch một lần trong request, dùng chung giữa các component.
Data Cache: Lưu cache dữ liệu fetch trên server, dùng lại cho nhiều request.
Full Route Cache: Cache toàn bộ trang đã render.
Route Cache: Cache trang trên trình duyệt khi người dùng điều hướng.

Hy vọng bài viết giúp bạn hiểu rõ hơn về caching trong Next.js! 🚀🔥