SSR, SSG và ISR trong Next.js là gì?

Question

Accepted Answer

Đây là ba chiến lược chính cho *thời điểm* HTML của một trang được sinh ra. Chọn đúng cái cho từng trang cân bằng giữa độ tươi mới, hiệu năng và chi phí server. ## SSG — Static Site Generation (tại thời điểm build) ```tsx // HTML được sinh MỘT LẦN trong `next build`, rồi phục vụ từ CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` Trang được pre-render thành HTML tĩnh lúc build và cache trên CDN. **Phân phối nhanh nhất có thể**, nhưng nội dung đóng băng cho đến lần build kế tiếp. Tốt nhất cho nội dung ít thay đổi: trang marketing, tài liệu, bài blog. ## SSR — Server-Side Rendering (mỗi request) ```tsx // HTML được sinh MỚI mỗi request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Server render trang theo mỗi request, nên dữ liệu luôn cập nhật — đổi lại là response chậm hơn và tải server mỗi lần truy cập. Tốt nhất cho dữ liệu cá nhân hóa hoặc luôn tươi mới: dashboard, trang tài khoản, kết quả tìm kiếm. ## ISR — Incremental Static Regeneration (lai) ```tsx // Tĩnh, nhưng tự động build lại ở nền sau mỗi N giây export const revalidate = 60; // tái sinh tối đa một lần mỗi 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR phục vụ HTML tĩnh (nhanh, cache trên CDN) nhưng **revalidate** nó ở nền theo lịch — nên bạn có hiệu năng tĩnh với dữ liệu được làm tươi định kỳ, mà không cần build lại toàn site. Tốt nhất cho nội dung thay đổi thỉnh thoảng: danh sách sản phẩm, tin tức, bảng xếp hạng. ## So sánh ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## Tại sao điều này quan trọng Trong App Router bạn chọn các chiến lược này theo từng fetch qua tùy chọn cache (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) thay vì các hàm đặc biệt. Hiểu đánh đổi — tĩnh là nhanh nhất nhưng cũ, SSR là tươi nhưng tốn kém, ISR cân bằng cả hai — cho phép bạn tối ưu mỗi trang theo đúng tỉ lệ giữa hiệu năng và độ tươi của dữ liệu.