Yêu cầu thg 5 21, 2023 3:29 SA 651 0 1
  • 651 0 1
0

ISR - Incremental Static Regeneration trong NextJS

Chia sẻ
  • 651 0 1

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

1 CÂU TRẢ LỜI


Đã trả lời thg 5 21, 2023 3:09 CH
+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 revalidate vào getStaticProps để lần tới user truy cập vào 1 trang, giả sử products/id/1 thì Next nó sẽ check xem đã cần revalidate (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 trang products/id/1 được gen trước đó, nhưng đồng thời ở background nó sẽ gen lại trang products/id/1 vớ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 trang products/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é

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 5 29, 2023 3:12 SA

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, revalidate vào bên trong hàm getStaticPaths có phải vậy không ạ ? Mình cám ơn bạn nhiều
Avatar Mai Trung Đức @maitrungduc1410
thg 5 29, 2023 12:01 CH

@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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí