ISR trong Next.js là gì, và khác gì so với trang tĩnh hoặc render ở mỗi request?

Người phỏng vấn muốn biết bạn hiểu ba cách dựng trang và biết chọn cách phù hợp với từng loại nội dung, không chỉ thuộc tên viết tắt.

Có ba cách. Trang tĩnh (SSG) được dựng một lần lúc build và giữ nguyên, nên rất nhanh nhưng chỉ đổi khi deploy lại. Render ở mỗi request (SSR, hay dynamic) dựng trang mới mỗi lần có người xem, nên luôn mới nhưng mỗi lượt xem đều tốn một lần xử lý và truy vấn dữ liệu. ISR (incremental static regeneration) nằm giữa: trang được lưu như trang tĩnh, và Next.js dựng lại nó ở nền theo một trong hai cách.

1. Theo thời gian. Đặt export const revalidate = 60 thì sau 60 giây, request kế tiếp vẫn nhận bản cũ nhưng kích hoạt việc dựng lại. Khi bản mới xong, các request sau nhận bản mới. Nghĩa là người đọc không bao giờ phải chờ dữ liệu.
2. Theo yêu cầu. Khi nội dung đổi, code gọi revalidatePath hoặc revalidateTag để đánh dấu cache là hết hạn, và lần truy cập kế tiếp dựng lại.

Chọn thế nào: nội dung ít đổi mà nhiều người đọc, như bài blog hay trang sản phẩm, hợp với ISR. Nội dung riêng cho từng người dùng, như trang tài khoản, cần render ở mỗi request. Nội dung không bao giờ đổi, như trang giới thiệu, hợp với trang tĩnh.

Hai điểm nên nêu thêm. Một là đánh đổi: ISR cho phép người đọc thấy bản cũ trong một khoảng ngắn, nên nó không hợp với dữ liệu phải chính xác từng giây như tồn kho hay số dư. Hai là nếu dùng route để làm mới theo yêu cầu thì phải bảo vệ nó bằng một mã bí mật, nếu không ai cũng gọi được và buộc máy chủ dựng lại liên tục.

Điểm cộng: nói được ISR cần một máy chủ Node.js chạy được, nên không dùng được khi xuất blog thành file HTML tĩnh hoàn toàn.