Composable Caching with Next.js

Vercel · 2025 · 4. Điều chỉnh · Độ khó: Trung bình — bài gốc

Vercel vừa làm framework Next.js vừa bán nền tảng chạy nó; nhận định về sản phẩm của họ trong trang này đều là "theo Vercel".

Bối cảnh

Bài thứ hai sau Vercel 2024: vì sao use cache là một directive (như use client) mà không phải hàm cache().

Compiler biến hàm có use cache thành server function có cache, và các phụ thuộc của nó thành khoá: getUser(id) thì id thuộc khoá.
Closure: hàm lồng trong component bắt biến cha (như id từ props); compiler thấy và tự đưa vào khoá. Theo Vercel, cache() ở runtime không nhìn được closure, phải ghi khoá tay, quên thì va chạm cache hoặc dữ liệu cũ, và biến nhạy cảm lọt vào khoá có thể gây cache poisoning.
Đầu vào không serialize được (như children là JSX) nằm ngoài khoá và được thay bằng reference rồi điền lại ở caller, nên chỉ cache <Profile> còn children vẫn động. Bài ví với mẫu "donut": vỏ đã cache, lỗ giữa điền lúc chạy.
Vòng đời cacheLife('hours'); tag gắn được sau khi fetch rồi revalidateTag.

Khoá cache sai là nguồn lỗi chính; để compiler suy khoá từ phụ thuộc đáng tin hơn kỷ luật tay.
Phần không cache được luồn qua bằng tham chiếu để khỏi vô hiệu cả khối.