Frontend hay gặpBốn cách này khác nhau ở chỗ HTML được dựng ở đâu và vào lúc nào. CSR dựng trên trình duyệt, SSR dựng trên server ở mỗi request, SSG dựng một lần lúc build, còn ISR giống SSG nhưng tự dựng lại trang sau một khoảng thời gian.
| CSR | SSR | SSG | ISR | |
|---|---|---|---|---|
| HTML dựng ở đâu, lúc nào | Trình duyệt, sau khi tải JS | Server, mỗi request | Lúc build | Lúc build, dựng lại sau revalidate giây |
| Hiển thị lần đầu | Chậm (chờ tải và chạy JS) | Nhanh, nhưng chờ server render | Nhanh nhất (file tĩnh trên CDN) | Nhanh như SSG |
| Độ mới dữ liệu | Luôn mới (gọi API ở client) | Luôn mới | Cũ tới lần build sau | Cũ tối đa revalidate giây |
| SEO | Yếu | Tốt | Tốt | Tốt |
| Tải server | Thấp | Cao (render mỗi request) | Gần như không có | Thấp |
| Hợp với | Dashboard, app sau đăng nhập | Trang cá nhân hoá, feed, giá đổi liên tục | Blog, docs, landing page | Trang sản phẩm, bài viết: nhiều trang, thỉnh thoảng sửa |
ISR hoạt động thế nào: khi hết hạn revalidate, người vào tiếp theo vẫn nhận bản cũ, đồng thời server dựng lại trang ở nền; những người vào sau nhận bản mới (cơ chế stale-while-revalidate). Muốn cập nhật ngay khi dữ liệu đổi thì gọi revalidatePath/revalidateTag (on-demand revalidation). Một số tài liệu gọi ISR là ISG (Incremental Static Generation).
// Next.js App Router: trang được dựng lại tối đa mỗi 60 giây
export const revalidate = 60Điểm chung: SSR, SSG và ISR đều gửi về HTML đã có nội dung, sau đó hydrate ở client để gắn sự kiện. Một app Next.js có thể dùng cả bốn cách, mỗi route một cách.
Lưu ý: chọn theo hai câu hỏi. Dữ liệu có khác nhau theo từng người dùng không (có → SSR, hoặc CSR nếu không cần SEO)? Dữ liệu cần mới tới mức nào (chấp nhận trễ vài phút → ISR, gần như không đổi → SSG)?