Giải Quyết Vấn Đề Cache Và Revalidation Trong Next.js: Kinh Nghiệm Từ FounderSignal

Mở Đầu

Vấn Đề Ban Đầu: Dữ Liệu Lỗi Thời Gian, Header Lạ

const response = await fetch("https://api.jsonplaceholder.com/v1/users", {
  next: { revalidate: 31536000 }, // 1 năm tính bằng giây
});

Hành Trình Debugging

Kiểm Tra API

Vấn Đề Ở Next.js Và Vercel

Thủ Phạm: Đặt Thời Gian Revalidate Quá Dài Hoặc Vô Hạn

Giải Pháp: Dùng Khoảng Thời Gian Revalidate Hợp Lý

const response = await fetch("https://api.jsonplaceholder.com/v1/users", {
  next: { revalidate: 86400 }, // 1 ngày tính bằng giây
});

Những Bài Học Quý Giá Cho Developer Next.js

1. Không Nên Dùng Thời Gian Revalidate Quá Dài Hoặc Vô Hạn

2. Luôn Kiểm Tra Header Response

3. Debug Cả Phía API Và Frontend

4. Sử Dụng Revalidation Theo Tag Để Kiểm Soát Thủ Công

// Fetch với tag
const response = await fetch("https://api.jsonplaceholder.com/v1/users", {
  next: { tags: ["users"] },
});

// Trong action hoặc API route
import { revalidateTag } from "next/cache";

await revalidateTag("users");

Kết Luận

Tham Khảo