0
ISR - Incremental Static Regeneration trong NextJS
Người ta nói ISR sinh ra với mục đích là bản chất giống với SSG nhưng cộng thêm khả năng generate HTML on demand.
Nhưng mà mình thấy, việc này SSG đã làm được rồi bằng cách sử dụng hàm getStaticPaths trong đó thuộc tính fallback được set bằng true.
Vậy mình vẫn không phân biệt được sự khác nhau là gì
Nhờ các bạn có thể giải thích giúp mình được không ạ. Chắc là ISR phải có gì đó đặc biệt hơn rồi
Thêm một bình luận
1 CÂU TRẢ LỜI
+4
chào bạn,
SSG dùng getStaticPaths thì vẫn là prerendering nhé bạn, getStaticPaths sẽ chỉ chạy 1 lần vào lúc build, và các page của bạn đc gen ra static và không đổi. Ví dụ trường hợp hay dùng: bạn có 10 products trong database và muốn gen ra 10 static page chứa detail của 10 products đó. 10 page kia sau khi prerender ra thì sẽ không đổi nữa.
ISG cho phép ta render ra các page static mà trước đó có thể nó chưa có, hoặc các page đó được update sau khi bạn build (chạy ra production rồi). Kiểu này thì sẽ tiện hơn khá nhiều so với prerender. Bạn xem thêm ở đây nhé. Ý tưởng là:
- với ISG thì ban đầu ta cũng dùng
getStaticPathsđể prerender trước ra 1 số lượng page static nhất định (10 trang sản phẩm) tại thời điểm build - sau đó ta thêm
revalidatevàogetStaticPropsđể lần tới user truy cập vào 1 trang, giả sửproducts/id/1thì Next nó sẽ check xem đã cầnrevalidate(tính toán lại) chưa? nếu cần thì ngay tại thời điểm user truy cập nó vẫn show trangproducts/id/1được gen trước đó, nhưng đồng thời ở background nó sẽ gen lại trangproducts/id/1với cập nhật mới nhất, và lần truy cập tiếp theo sau đó thì user sẽ xem được nội dung mới nhất của trangproducts/id/1 - Còn nếu user truy cập vào trang
products/id/20, trang này chưa được gen ra trước đó thì Next đầu tiên nó sẽ dùng SSR (Server side rendering) cái product id=20 đó để show lên cho user trước, cùng lúc đó nó gen page id=20 đó ở background và lần sau khi user truy cập vào thì sẽ xem được page là static (SSG)
Phần giải thích bên trên là cấu hình cơ bản nhất cho ISG với Next, ngoài ra Next còn support ta thêm nhiều cấu hình cho ISG nữa, bạn check docs để biết chi tiết nhé
Cám ơn bạn Trung Đức nhiều mình có 2 câu hỏi thắc mắc nữa là:
- Trên bạn sử dụng ISG, cái này có giống với ISR không ?
- Vậy túm cái váy lại là ISR là dạng nâng cao hơn của SSG, ISR nó có được tạo ra bằng cách chúng ta cung cấp thêm một số thuộc tính nữa như :
fallback,revalidatevào bên trong hàmgetStaticPathscó phải vậy không ạ ? Mình cám ơn bạn nhiều
@wiliamfeng chào bạn, tóm lại đó là:
SSG (Static Site Generation): gen page tĩnh, sau khi gen sẽ không đổi, không tự cập nhật ISG (Incremental Site Generation): gen page tăng dần, ban đầu gen 1 số lượng page tĩnh như (SSG), nhưng sau đó có thể tự cập nhật và gen thêm
