Bạn đã bao giờ xây dựng một website tĩnh (static site) rồi nhận ra nội dung cần cập nhật liên tục chưa? Đứng giữa việc chọn static (nhanh nhưng cố định) hay server-side rendering (linh hoạt nhưng chậm), ISR (Incremental Static Regeneration) xuất hiện như một phương án kết hợp tốt nhất của cả hai thế giới.
ISR Là Gì?
ISR (Incremental Static Regeneration) là kỹ thuật cho phép trang web tĩnh tự động cập nhật nội dung sau khi đã build, mà không cần rebuild toàn bộ site. Nghĩa là bạn vẫn hưởng tốc độ của static page, nhưng nội dung luôn tươi mới.
Thuật ngữ này phổ biến nhất trong hệ sinh thái Next.js, nơi nó được tích hợp sẵn từ phiên bản 12. Tuy nhiên, các framework như Nuxt, SvelteKit, Astro cũng đã bắt đầu áp dụng cách tiếp cận tương tự.
ISR Hoạt Động Như Thế Nào?
Quy trình ISR diễn ra theo 3 bước đơn giản:
1. Build ban đầu: Khi bạn deploy, Next.js tạo ra các trang HTML tĩnh như static generation thông thường. Trang đầu tiên được tạo sẽ serve cho tất cả người dùng.
2. Revalidation theo thời gian: Bạn cấu hình thời gian revalidate (ví dụ: 60 giây). Trong khoảng thời gian này, mọi request đều nhận về trang tĩnh đã cache — cực kỳ nhanh.
3. Tái tạo ngầm (background regeneration): Sau khi hết thời gian revalidate, request tiếp theo sẽ trigger quá trình regenerate trang mới ở background. Người dùng vẫn nhận trang cũ cho đến khi trang mới hoàn tất.
Điều này có nghĩa là không ai phải chờ đợi, và nội dung luôn được cập nhật ở lần request sau.
Ví Dụ Thực Tế Về ISR
Mình lấy ví dụ cụ thể cho dễ hình dung. Giả sử bạn chạy một blog công nghệ, bài viết được cập nhật mỗi giờ:
Nếu dùng SSG thuần: Mỗi lần sửa bài, bạn phải rebuild toàn bộ site. Site có 1.000 bài? Rebuild mất 10 phút. Khách gõ URL trong lúc đang rebuild? Có khi nhận trang cũ, có khi lỗi.
Nếu dùng SSR thuần: Mỗi lần có người truy cập, server phải render lại trang. 1.000 người truy cập cùng lúc = server quá tải. Tốc độ chậm hơn rõ rệt.
Nếu dùng ISR: Trang được render một lần, cache lại. Mỗi 60 giây (hoặc bao lâu bạn cấu hình), trang tự động regenerate ở background. Người dùng luôn nhận trang nhanh, nội dung cập nhật tối đa 60 giây trễ — hoàn toàn chấp nhận được.
Cấu Hình ISR Trong Next.js
Cách triển khai ISR rất đơn giản. Trong Next.js (App Router), bạn chỉ cần thêm revalidate vào fetch hoặc segment config:
// app/blog/[slug]/page.js
export const revalidate = 60; // revalidate mỗi 60 giây
export default async function BlogPost({ params }) {
const post = await fetch(`...`);
return <Article data={post} />;
}
Với Pages Router cũ, bạn dùng getStaticProps với thuộc tính revalidate:
export async function getStaticProps() {
const data = await getData();
return {
props: { data },
revalidate: 60,
};
}
Một dòng cấu hình, vậy thôi. Rất gọn.
ISR Có Gì Hơn Các Phương Áp Khác?
So với SSG (Static Site Generation): ISR thừa hưởng tốc độ của SSG nhưng khắc phục điểm yếu chí mạng — không cần rebuild khi nội dung thay đổi. SSG phù hợp cho site ít cập nhật, ISR cho site cập nhật thường xuyên.
So với SSR (Server-Side Rendering): ISR giảm tải server đáng kể vì chỉ regenerate theo chu kỳ, không render mỗi request. SSR cho trang thực sự động (dashboard, giỏ hàng), ISR cho nội dung bán tĩnh (blog, listing sản phẩm).
So với CSR (Client-Side Rendering): ISR serve HTML sẵn nên SEO tốt, first contentful paint nhanh. CSR hợp cho ứng dụng web phức tạp, không hợp cho trang cần index.
Nên Dùng ISR Khi Nào?
Theo mình, ISR là lựa chọn tuyệt vời cho các trường hợp sau:
E-commerce: Trang danh mục sản phẩm, trang chi tiết sản phẩm. Giá cả, tồn kho thay đổi liên tục nhưng không cần real-time. Revalidate 5-10 phút là đủ.
News/Blog: Bài viết được edit, thêm comment, cập nhật view count. ISR 60 giây giữ nội dung tươi mà không нагрузки server.
Documentation: Tài liệu được cập định kỳ. ISR 1 giờ hoặc hơn, đảm bảo người dùng luôn thấy version mới nhất.
Marketing pages: Landing page thay đổi A/B test, cập nhật campaign mới. ISR giúp deploy nhanh không cần chờ build.
Nhược Điểm Cần Lưu Ý
ISR không phải màu hồng hoàn toàn. Một vài hạn chế mình gặp trong thực tế:
Stale content: Có khoảng trễ giữa lúc nội dung thay đổi và lúc user thấy. Với blog thì ổn, nhưng với giá coin hay stock market thì không.
Phụ thuộc hosting: ISR cần runtime hỗ trợ. Next.js trên Vercel thì perfect, nhưng nếu tự host bằng Docker hay CDN truyền thống, bạn cần cấu hình thêm (có thể dùng output: 'standalone' hoặc Next.js adapter).
On-demand revalidation: Đôi khi bạn muốn update ngay lập tức (publish bài mới, sửa lỗi). Next.js hỗ trợ On-Demand ISR qua API route, nhưng cần setup webhook hoặc trigger thủ công.
ISR vs Streaming SSR — Xu Hướng Mới
Nếu để mình dự đoán, ISR vẫn sẽ tồn tại lâu dài vì nó giải quyết đúng bài toán: nội dung bán tĩnh. Tuy nhiên, với sự trỗi dậy của Streaming SSR (React Server Components), ranh giới giữa static và dynamic đang mờ đi. Trong tương lai, có thể chúng ta sẽ không còn cần phân biệt rõ ràng nữa — framework tự quyết định page nào nên static, page nào nên stream.
Nhưng hiện tại, nếu bạn đang dùng Next.js hay Nuxt, ISR vẫn là vũ khí lợi hại nhất cho performance và freshness cùng lúc.
Kết Luận
ISR là giải pháp thực dụng nhất cho bài toán “nhanh mà mới”. Thay vì chọn giữa tốc độ của static và tính linh hoạt của dynamic, bạn có cả hai. Nếu bạn đang build website với Next.js và nội dung cập nhật thường xuyên, mình khuyến nghị dùng ISR cho hầu hết các trang — chi phí cấu hình cực thấp, lợi ích rõ ràng.
Một dòng revalidate: 60 có thể tiết kiệm cho bạn hàng giờ đồng hồ optimize performance đấy.
