NextJS: 02-10 ISR - Incremental Static Regeneration 🚀

[@hoangpham1132]

0:00 Giới thiệu 0:37 Nhắc lại về SSG, CSR, SSR and ISR 3:44 Incremental Static Regeneration - ISR 5:15 Hai hướng tiếp cận với ISR: Faster Build & Higher cache hit rate 6:32 Cách tạo và hoạt động ISR 10:17 getStaticPaths với fallback 22:56 CDN Cache 27:10 Tổng kết

[@EasyFrontend]

Yeah cảm ơn em nhiều nhiều nhé Hoang Pham ơi Số lượng video đã contribute chapter: 25 🎉

[@trungtrung2248]

bài giảng hay quá mà các anh/chị bạn quên chưa like kìa. Các bạn ủng hộ anh Hậu 1 like nhé hehe

[@EasyFrontend]

haha cảm ơn Trung nhiều nhiều 😊

[@thanhvinhle5709]

hi a giây 9:00, 60 giây tiếp theo của cycle là mình tính từ khi generate new page hay update cache (trong hình) vậy ạ, thanks a

[@quannguyenviet643]

HỌc bài này dễ hiểu phê thiệt chứ

[@timothy.nguyen23]

Xem xong bài 2-9 qua bài này cảm thấy dễ chịu hơn. Nice sắp xếp, anh Hậu

[@EasyFrontend]

yeahhh cảm ơn em nhiều nhé Tân hihi

[@breaking-news-latest]

Cái ISR hiện tại nó có hỗ trợ cho App router không anh? Em đang dùng App router copy thư mục post của anh mà ko chạy đc

[@phammanhkien2824]

anh Hậu cho e hỏi, cái này mình muốn website của mình render theo kiểu nào thì khai báo kiểu đó ạ ?

[@EasyFrontend]

à một website thì có nhiều trang (page) mỗi page thì em có thể chỉ định cách render khác nhau được nhen hehe

[@phammanhkien2824]

@@EasyFrontend dạ vâng ạ,em cảm ơn a ạ

[@MinhNguyenNgoc-pz4el]

A cho em hỏi chút ạ. Em dùng ISR để gen khoảng 2000 page để phục vụ SEO . Nhưng khi em build thì nó chỉ build ra được khoảng hơn 100 page html . Khi build thì ko báo lỗi gì. A cho e hỏi nguyên nhân phần này có thể do đâu ạ. Em cảm ơn a

[@NguyenTuan-ih7ff]

13:12 Cho mình hỏi nhờ chút, chỗ này bạn đang dùng công cụ gì(cho mình xin link với nhé),cảm ơn bạn nhiều

[@EasyFrontend]

www.postman.com/ hi Tuấn, cái đó là postman nhen 😉

[@nhuinhan7523]

A cho em hỏi ạ. Server cache của CDN như em hiểu là nó đã được cài đặt sẵn kèm với NextJS đúng không ạ. Em xem video của a thì hiểu cách hoạt động của CDN nhưng không biết nó cài đặt thế nào ạ

[@EasyFrontend]

hi em, cái này anh cũng chưa thực hiện bằng tay nên hk rõ em nhen nhưng nếu em dùng vercel thì nó đã xử lý phần CDN này cho em rồi á hehe

[@DuongLe-qz6ib]

anh Hậu cho e hỏi trong khoá này anh có dự định dạy những update của NextJS version 13 k a

[@EasyFrontend]

hi em, thanks em đã gợi ý. Anh sẽ cân nhắc sau khi xong series này nhé

[@MinionREMIXs]

anh Hậu cho em hỏi là khi một bài đăng bị xóa đi thì làm sao trên server xóa file đó ạ, mong anh giải đáp giúp em với ạ, cảm ơn anh!

[@EasyFrontend]

hi em, cái này bên backend xử lý xóa dữ liệu trong db rồi xóa files trên ổ đĩa là đc em hen 😉 backend có thể truy cập đc file system, nên hoàn toàn quản lý đc files em nha

[@MinionREMIXs]

@@EasyFrontend vâng cảm ơn anh!

[@trungtrung2248]

à anh Hậu cho em hỏi chút, cái trang list product mà cần dùng SEO thì mình sẽ làm theo cách nào ạ

[@EasyFrontend]

à product list thì SEO kiểu gì Trung hen? có vẻ ko hợp lý á em 😉 hoặc em có thể share cụ thể em muốn làm thế nào hk Trung?

[@trungtrung2248]

@@EasyFrontend à thực ra em chỉ muốn hỏi là có nên làm SEO cho list product không ạ hihi, tại em chưa nghĩ ra được cách SEO cho list product

[@philongngo1423]

Hello a Hậu, cho e hỏi là trong vd của a thì những trang sau 1000 thì nó nằm luôn trong cache hay có thay đổi gì không ạ

[@EasyFrontend]

hi Long, 1000 items đầu tiên thì nó có sẵn còn các items khác, khi fetch lần đầu em vẫn phải đợi nhen, sau lần đầu thì nó cache lại, mấy lần sau mới nhanh hehe

[@lenhattan46]

Sao mà mình lúc nào cũng build trước rồi sau đó mới start lại vậy a? e chưa hiểu lắm

[@EasyFrontend]

à start nó chỉ đơn giản là host cái folder dist của mình thôi à. Nên ko build thì ko có file mới nhất để host nha Tân hehe 😉

[@lenhattan46]

@@EasyFrontend dạ chổ này nếu không build thì như code trên nó sẽ đợi 3s rồi mới render ra đúng không a (môi trường dev)

[@EasyFrontend]

à môi trường dev thì nó luôn luôn gọi cái hàm getStaticProps nhen Tân, để đảm bảo luôn có dữ liệu mới nhất. Còn ở môi trường production thì nó mới apply mấy cái cache, rồi revalidate này nọ nhen Tân 😉 và nếu hàm getStaticProps mà tốn 3s là lần nào mình get page nó bị tốn 3s nhen hehe

[@lenhattan46]

@@EasyFrontend dạ e hiểu rồi a.. Tks a nhiều, bài học rất hay nha a :)))

[@thang1324]

Dạ vậy ISR nó chỉ cập nhật revalidate đúng 1 cái mà user truy cập thôi hay nó cập nhật lại toàn bộ trong cache vậy anh?

[@EasyFrontend]

hi Thắng, cache ở đây là ở tầng CDN, nên cập nhật là cập nhật trên CDN server em nhen thành ra cache cập nhật thì tất cả users được hưởng lợi, chứ ko phải chỉ user hiện tại hehe

[@huynguyendang1405]

cho em hỏi là ở đoạn mình cho cái id của page 2 thì làm sao thằng getstaticprops lấy đc id ý mà để mình có data nhỉ vì thằng getstaticpath đang gọi page1

[@EasyFrontend]

hi Huy, về cái phần query params thì getStaticProps nó ko biết em nhen getStaticProps và getStaticPaths nó chạy lúc build time nên những gì của runtime / user request là nó ko biết phần xử lý query là sẽ nằm phía client em nhen 😉

[@tranphai3865]

Dùng fallback nếu ko có dữ liệu trả về thì nó sẽ fake data thì dữ liệu data fake lấy ở đâu a nhỉ? Nếu làm e-commerce thì fake product nó hơi kỳ a nhỉ?

[@EasyFrontend]

à nếu vậy thì em chịu khó đợi có dữ liệu rồi trả về hen, đừng dùng fake data. À với em tag giúp anh số phút giây em nói trong video nha, tại lâu quá a hk nhớ nói gì haha

[@cuongtran-vv1hi]

Khi mình vừa mới sửa sản phẩm. Lần đầu tiên mình vào trang thì sẽ thây dữ liệu vẫn cũ chưa thay đổi gì. Sau thời gian revalidate mình reload lại trang thì lúc này nó chạy ngầm tạo ra cái dữ liệu mới. Ý chỗ này em hỏi lần đầu vào nó luôn luôn là dữ liệu cũ sau khoảng thời gian revalidate thì mình reload lại trang lúc này mới có dữ liệu mới. Nếu mà trong khoảng từ lúc tạo trang đến lúc revalidate mà mình có reload thì nó sẽ lấy dữ liệu trong cache ra đúng ko ạ. Em cảm ơn anh.

[@EasyFrontend]

yeah đúng òi em nha, hoặc nếu em muốn user thấy nội dung mới sau khi cập nhật thì mình nhờ bên backend họ invalidate cache trên cdn nhen. Kiểu update item A xong, bên BE tạo cái request lên CDN nhờ xóa cache của item A đi. Để user request lên nó đi lấy cái mới, khỏi xài cache hehe

[@cuongtran-vv1hi]

@@EasyFrontend Bắt buộc lần thứ 2 reload trang mới có dữ liệu, nếu ko reload trang nó vẫn dữ liệu cũ. Với cái revalidate với invalidate về cơ chế có khác nhau ko ạ. Em cảm ơn

[@vutruongsinh3591]

anh ơi, có cách nào để sau khi nextjs update data và cache xong thì nó tự render lên UI lun mà hông cần phải f5 lại?

[@EasyFrontend]

hi em, cái đó thì em phải làm CSR thì đc nè, hông biết tình huống của em thế nào mà cần như vậy em hen ? có thể có giải pháp khác

[@vutruongsinh3591]

@@EasyFrontend trong bài biết, em muốn khi cập nhật trong settting của admin, thì khi admin cập nhật xong là nó gọi bài viết mới liền, hiện tại e đang dùng CSR + useQuery, em trick bằng cách mỗi lần client nó focus nào window thì nó gọi lại api bài viết đó; giờ e thấy cách này hay quá mà hông bik làm sao; trang bài viết có SEO ạ; mà lượng người dùng giao động từ 1k-10k; em muốn tối ưu luôn cho 20k lượt truy cập;

[@nghianguyen119]

Khi dùng ISR mình muốn set thêm stale-while-revalidate được không anh Hậu? Để tránh trường hợp user nhận thông tin sai sau khi version cũ đã tồn tại quá lâu như anh nói ở SSR

[@EasyFrontend]

à có nha Nghĩa, em check cái options revalidate nhen 😊

[@nghianguyen119]

@@EasyFrontend em đọc doc trên nextjs thì không tìm được chỗ đó, anh có bài nào về vấn đề này không e xin xem với

[@thienvu1377]

a đã biết cách làm chưa ạ

[@huynguyendang1405]

cho em hỏi là cái fallback = true or 'blocking' chỉ dùng được với ISR thôi đúng k ạ còn SSG k dùng được đúng k ạ

[@EasyFrontend]

yeah đúng òi Huy nhen, SSG thì kiểu build sẵn, có thì trả về, ko thì not found em nha

[@lehuynhuc656]

a cho em hỏi dùng ISR xong khi mình admin mình post or sửa một bài post mà vì user chỉ chuyển qua lại giữa các trang nên không hề biết là có chỉnh sửa or thêm bài post mới, vì user ko biết phải reload mới hiện mà tầm tiếng sau cũng ko hiện vậy hơi sai sai nhỉ a, em nên làm như nào nhỉ

[@EasyFrontend]

à cái này tuỳ vào việc em set cái stale time bao lâu nha nếu em để 30 giây đi hen, thì sau 30s là nó đi fetch lại nội dung mới rồi Đức, thì user sẽ thấy cái mới chứ, đâu cần reload page đâu em hen. Khi chuyển từ page này sang page khác là mình có fetch lại dữ liệu òi mà hen 😉

[@Heocon1507]

A Hâu cho e hỏi về cái CDN với. Theo e hiểu thì khi build project (ISR) thì nó tự động push các file đó lên CDN để cache phải không ạ? Nghĩa là cái này đang được support bởi nextjs? Vậy cơ chế để cached bằng control-cache (không phải cache dạng memory, file, redis,..) thì ở 1 trang web bình thường (ví dụ như e đưa 1 file html lên 1 VPS e tự host) thì nó cache ở đâu a nhỉ?

[@EasyFrontend]

à anh nghĩ vẫn phải setup CDN cho cái VPS của em nhen Quang 😊

[@ucanhle7924]

e đang có một case. đó là cái dynamic route của e nó có 2 cái query exams/[query1]/abc/[query2]. nhưng cái query 1 em lại k có page nào k dùng getStaticProps + staticPaths ( e fix cứng khi click vào router exams/1/abc/[query2], exams/2/abc/[query2] ). khi e dùng ở page [query2].js thì nó lại báo lỗi. k biết nên xử lý sao a nhỉ

[@EasyFrontend]

hi Anh, anh chưa hiểu ý em lắm, có gì em chat qua messenger và share cụ thể trường hợp của em, rồi mình discuss thêm em hen 😉

[@quangthuan1172]

Hi anh Hậu ơi, cho em hỏi chút ạ. Em đang làm chức năng xem story tương tự như của Facebook. Ở danh sách story em đang dùng CSR để lấy danh sách story về. Tuy nhiên, sau khi bấm vào xem chi tiết 1 story hoặc chuyển sang router khác rồi quay lại trang danh sách story nó sẽ bị render lại từ đầu dẫn đến tình trạng UI bị trắng xóa rồi mới hiển thị lại danh sách story. Em cũng có dùng react-query để tránh fetch lại dữ liệu khi chưa có gì mới, tuy nhiên vẫn không giải quyết được vấn đề. Anh cho em xin lời khuyên với ạ.

[@EasyFrontend]

hi em, anh nghĩ là do em có cái điều kiện nếu đang fetch thì show loading / null em bỏ điều kiện đó đi nhen là okie khi back lại nó sẽ show dữ liệu cũ, rồi fetch cái mới, có thì show lên em hen em kiểm tra lại xem sao nha

[@minhtien1945]

vậy có cách nào mình cập nhật lại data mới mà ko phải reload lại trang khi mình sửa dụng ISR ko anh

[@EasyFrontend]

à ko em nhen 😉 hoặc em có thể âm thầm update bên dưới, thêm cái useEffect() check và update định kỳ nhen, mà hk cần thiết lắm em nhen. Hoặc may be dùng swr nha Tiến 👍

[@minhtien1945]

@@EasyFrontend tại e thấy mình phải reload lần thứ 2 mình mới có được data mới, vậy có cách nào thay vì nhận data cũ mà nó trả về ngay lập tức mình thay thế bằng 1 skeleton loading đợi khi có data mới về ko a

[@EasyFrontend]

@@minhtien1945 vậy em dùng kiểu blocking đi Tiến. Trong video a demo 2 kiểu lận mà hehe Tuỳ nhu cầu của em mà dùng thôi hen 😍

[@KienNguyen-sg1nf]

Dạ anh cho em hỏi khi mình dùng ISR cho detailPost thì nó cập nhật lại cái bài post đó nhưng bên thằng listPost nó vẫn như cũ không thay đổi thì mình phải thêm revalidate cho trang listPost luôn ạ để khi mà mình cập nhật 1 bài post bất kỳ thì đồng thời listPost cũng cập nhật lại luôn. Em cảm ơn anh nhiều ak

[@EasyFrontend]

à với trang list thì mình có thể dùng hướng tiếp cận fetch data phía client side em nhen. nên khi quay lại trang list thì mình luôn fetch dữ liệu mới. còn em muốn cache nữa thì có thể dùng useSWR() để xử lý chỗ đó mượt hơn nhen hehe

[@KienNguyen-sg1nf]

@@EasyFrontend Em cảm ơn anh ạ

[@xuantruongle1939]

Em chào anh, anh ơi cho e hỏi chút thắc mắc này. Em thấy getStaticPath để sinh ra url cho bài post. vậy nếu như em chỉ lấy danh sách và không cần đường dẫn (chỉ có danh sách, không có detail) thì có phải xử lý thế nào anh. Nếu chỉ dùng getStaticProps và revalidate thì liệu nó có lấy data mới trong db không a? bài toán của em là lấy danh sách bài posts và pagination theo update từ cms Em cảm ơn.

[@EasyFrontend]

à nếu vậy em làm giống bài CSR á Trường hehe

[@xuantruongle1939]

@@EasyFrontend em xin lỗi vì nói k rõ, e vẫn muốn build theo serer side anh ạ. render trước khi trả về client

[@EasyFrontend]

em thử tham khảo cách SSR xem sao nha Trường. CSR, SSG, SSR và ISR. Em xem xét từng case, xem cái nào phù hợp với nhu cầu của em nhất nhé hehe

[@chuongtran2208]

Trước tiên em cảm ơn anh Hậu và chúc sức khoẻ anh thiệt nhiều 😆, em xem seri Nextjs của anh cuốn hút quá chừng 😋, anh ơi cho em hỏi, em có case 1 page giới thiệu thông tin sản phẩm và cần SEO, thông tin về sản phẩm cũng được update khá thường xuyên, code hiện tại em dùng CSR nên performance rất kém, em muốn apply theo kiểu SSG để cải thiện performance, nhưng lại bị dính case nếu source code được build và deploy lúc 9g sáng, và admin cập nhật thông tin lúc 10g sáng thì content của trang thông tin sản phẩm đã không đúng. Em có thử đổi hướng sử dụng SSR nhưng performance không tốt, anh cho em xin lời khuyên nha anh 😫

[@EasyFrontend]

à vậy áp dụng kĩ thuật ISR này đi Chương 😉 nó giải quyết được bài toán của em rồi hehe

[@chuongtran2208]

@@EasyFrontend em cảm ơn anh Hậu nha 😁

[@lehuynhuc656]

a ơi lúc em build file xong em POST thêm 1 bài post sau (reValidateTime) post đó có hiện nhưng mỗi lần em load lại trang nhiều lần sau đó tuy post đó hiện ngay nhưng em xem trong tab netwwork luôn có request gọi lại post đó mỗi khi load lại trang trong khi 10 post build trc đó thì ko có request, làm cách nào dùng Incremental Static Regeneration khi thêm 1 bài post những lần reload sau đó sẽ ko có request như những post đã build đc ko a, em tạo thêm thì mấy post sau đều bị gọi request khi reload

[@EasyFrontend]

hi Đức, anh hk hình dung được issues của em lắm. Chắc nhờ em demo code minh hoạt rồi đăng lên nhóm facebook trao đổi easy frontend nhen, có gì mn cùng tham gia thảo luận em hen 😉

[@huynguyendang1405]

em có câu hỏi là làm sao để mình xác định được là mình muốn build trước 100 sản phẩm chứ không phải 10000 sản phẩm ạ

[@EasyFrontend]

à cái này phải dựa vào mong muốn của business + analytics nha Huy 😉

[@huynguyendang1405]

@@EasyFrontend vâng nhưng ý e là làm sao để mình set được là 100 sản phẩm ý ạ

[@huynguyendang1405]

@@EasyFrontend vâng nhưng ý e là làm sao để mình set được là 100 sản phẩm ý ạ

[@EasyFrontend]

@@huynguyendang1405 em nhờ API cho truyền tham số, lấy 100 items là okie em hen 😉

[@longnguyenvu6608]

Anh ơi cho em hỏi, KH yêu cầu một landing page SEO tốt, theo thông thường thì em sẽ chọn SSG. Tuy nhiên KH muốn có tính năng giúp admin trực tiếp sửa text nội dung trên trang web. Nếu dùng ISR thì phải chờ hết thời gian revalidate mới nhận được data mới. nên em tính dùng SSR để text trên trang luôn là mới nhất. Anh có ý gợi ý gì giúp em không ạ?

[@EasyFrontend]

hi Long, tính năng này sẽ có trên Next 12 hihi em tham khảo ở cái thread này nhen nó tên là: On-Demand Incremental Static Regeneration anh cũng chưa thử ông thần này 😅 github.com/vercel/next.js/discussions/21903#discussioncomment-2198176 --- SSR thì em cẩn thận về performance, nếu mình handle đc thì có thể dùng SSR tạm em nha.

[@chuongtran2208]

Em chào anh Hậu, anh cho em hỏi thêm nữa nha anh. Dạ là em áp dụng kĩ thuật ISR vào page của em, đối với các api không cần cookies thì em có thể gọi được ở hàm "getStaticProps", nhưng đối với api cần attach cookies thì em đang handle bằng cách gọi ở client do lúc gọi hàm "getStaticProps" ở server nó không nhận được cookies, dạ anh cho em hỏi em muốn gọi api có cookies ở "getStaticProps" luôn được không anh hoặc anh có cách nào để mình tối ưu hơn hông ạ? em cảm ơn anh Hậu.

[@EasyFrontend]

à phần cookies thì phía server mình ko giữ em nhé, nếu cần thì cần chủ động bên phía client em nhen 😉 private data, chỉ có quản lý bên phía client thôi hehee

[@chuongtran2208]

@@EasyFrontend dạ em cảm ơn anh Hậu nhiều 😁

[@ChimCuXanhGaming]

Anh hậu cho em hỏi: nếu như em hiểu đúng thì ISR theo anh hậu bảo là trong thực tế nếu page nào mình cần SEO thì dùng ISR này chứ không dùng useEffect nữa vì thằng SSG này khi build sẽ tạo ra 1 file .html (đối với getStaticProps) còn nếu có thêm getStaticPaths thì thằng getStaticProps này nó sẽ tạo ra số lượng file .html tuỳ theo số lượng object id truyền vào, oke a khúc này bỏ qua hi. Cái em thắc mắc là ví dụ anh demo thì trường hợp dùng revalidate: 5 thì khi ở dưới 5s dù mình reload browser bao nhiêu lần thì nó cũng k cập nhật dữ liệu mới nhất, còn sau 5s thì khi reload browser lần đầu tiên thì next nó sẽ cập nhật lại file .html theo id sau đó lại f5 1 lần nữa thì lúc này UI mới cập nhật dữ liệu mới nhất -> Ủa anh nêu vậy flow trong thực tế thì mỗi khi user gửi request (call api) thì mấy thằng SSG, SSR này sẽ được gọi 1 lần. Nếu vậy trong trường hợp update, khi em bắt data xong em gửi request put or patch để update thì lúc này ISR sẽ được gọi 1 lần, nhưng lần này nó chỉ update file .html lại và SAU ĐÓ PHẢI RELOAD hay làm cách nào đó để browser reload 1 lần nữa thì data trên UI mới được cập nhật sau khi update -> Ý em là theo anh demo thì phải reload 2 lần mới update được data mới trên UI

[@ChimCuXanhGaming]

nếu không dùng ISR thì thông thường CSR khi gửi request update cho 1 object xong em sẽ cho await để call lại api getAll để cập nhật lại đata á a

[@EasyFrontend]

trời nhìn đoạn văn hoảng quá em 🤣 mà cơ bản khi em dùng ISR thì em phải aware được việc bao lâu mới update em nhen. nếu update thường xuyên, liên tục thì có vẻ ISR chưa hợp lý lắm nhen 😉

[@EasyFrontend]

@alias7257 hi em, hiện next 13 có hỗ trợ on-demand revalidation luôn á em, nên em có thể chủ động invalidate bất cứ khi nào em muốn nhen hehe 😊

[@ucanhle7924]

server nó build nhiều file html thế thì có bị nặng không anh =))

[@EasyFrontend]

à có em nhen hehe, nên đau một lần lúc build thôi, chứ đau hoài hơi thốn hehe với tùy vào dung lượng của mấy cái files mình build ra, mình cần bố trí cấu hình server phù hợp để nó chạy cho mượt em nhen 😊

[@ucanhle7924]

@@EasyFrontend dạ vâng a. 😂😂