Bạn cho mình hỏi CDN trong trường hợp này là NextJs nó hỗ trợ luôn hay mình phải làm riêng rồi liên kết lại với NextJs? Nếu làm riêng thì bạn hướng dẫn cách liên kết được không?
hi bạn, nếu bạn dùng Vercel thì nó hỗ trợ sẵn luôn nhen còn nếu bạn ko dùng vercel thì phải config chỗ này, bạn có thể xem thêm ở đây nha nextjs.org/docs/pages/building-your-application/deploying/production-checklist
0:00 Giới thiệu 0:34 Bắt đầu - Server side rendering with data 1:52 getServerSideProps 3:21 Vấn đề khi sử dụng getServerSideProps 6:20 Sử dụng cache để xử lý 8:30 Sử dụng s-maxage=5 12:43 Sử dụng s-maxage=5 và stale-white-revalidate 18:31 Sử dụng s-maxage=5 và stale-white-revalidate=5 24:30 Vấn đề tiềm ẩn - Potential issues
Trong trường hợp dùng "stale-while-revalidate" mà không set giá trị e thấy nó cứ ngồ ngộ thế nào anh nhỉ. Thà chậm mà được dữ liệu đúng còn hơn là nhanh mà bị dữ liệu sai.
haha nó là bài toán em cần xử lý, tuỳ trường hợp mà em dùng cho hợp lý thôi hen 😊 kiểu dữ liệu lâu lắm mới cập nhật, mà em cứ để cập nhật thường xuyên thì cũng phí, nên mình cân đo đong đếm sao cho phù hợp em nhen
hi Cường, em đọc thêm ở đây nha www.cloudflare.com/learning/cdn/what-is-caching đại loại nó là một mạng lưới toàn cầu, nó cache giúp mình mấy cái static resources, để khi users cần thì nó trả về liền luôn. Ko cần qua server của mình. Ví dụ đơn giản thế này: Lần đầu: user --> CDN chưa có cache --> server của mình Lần sau: user --> CDN có cache thì trả về luôn, ko lên server mình nữa
em tham khảo migration docs chỗ này nhen nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#server-side-rendering-getserversideprops
Anh Hậu cho e hỏi cách tính "stale-while-revalidate" với ạ. Nó được tính từ lúc req được thực hiện (tức là bắt đầu cùng với lúc cache time được tính) hay là tính từ lúc cache bắt đầu hết thời gian hả anh
nếu dùng s-maxage = 10 hoặc s-maxage = 5, state-while-revalidate = 5 thì 2 cái đều trả về data cũ nếu dưới 10s còn trên 10s thì đều chạy lại gSSP(), vậy 2 cái khác nhau cái gì anh nhỉ
anh ơi ví dụ s-maxage=5 hay những tham số khác liên quan đến thời gian thì nó sẽ tính từ request đầu tiên hay request cuối cùng ạ. Ví dụ 4s em f5 lại thì nó có reset lại 5s không hay là 1s sau nó đã chạy lại hàm getServerSideProps anh nhỉ
hi Nam, em lưu ý, phần thời gian này là nó tính trên phía CDN chứ ko phải dưới client của em nhen. Trên CDN nó cứ chạy thời gian, tùy vào em request lên lúc nào, nó sẽ biết và xử lý tương ứng em hen, chứ ko phải em reload dưới client là nó đếm lại từ đầu nhen
s-maxage = 5, state-while-revalidate = 5 nếu trong giây thứ 5 mình reload nó sẽ chạy getServerSideProps() và có kết quả trong 3s thì giây thứ 8 mình reload sẽ có data mới đúng mà ko phải đợi 3s để getServerSideProps() đúng ko ạ
anh ơi cho em hỏi với ạ mình dùng s-maxage=5 và stale-white-revalidate=5 lúc đầu mình có title =4 sau đó mình vào mình thay đổi title= 5 mà mình reload page ở giây thứ 6 thì cái title mình hiện ra màn hình là số mấy ạ
0-5 giây đầu: trả về từ cache là số 4 6-10s: trả về cache số 4, sau đó âm thầm bên dưới build lại page và có được title=5 request sau sẽ thấy title=5, thay vì 4 nha Phát
@@EasyFrontend z là trong khoảng 6-10s: lúc đầu hiện ra title=4 sau đó ở những lần request sau ( cũng trong khoảng 6-10s) nó hiện title=5 luôn hả anh?
dạ anh ơi, cho em hỏi là thời gian s-maxage và swr là tương ứng cho từng user, hay là tính chung (ví dụ mình set time là 5s -> user 1 request -> lưu vào cache -> giây thứ 2 có user 2 request -> trả về từ cache) luôn ạ. Em cảm ơn anh
à nếu vậy em tăng thời gian ở giai đoạn (s-maxage) như anh mô tả trong cái bảng từ 5 lên 10 em nhen còn lại ko thay đổi hehe tức lúc đầu thay vì chỉ có 5s, thì giờ trong khoảng 10s đầu, mình sẽ trả về từ cache ngay lập tức luôn hehee
anh ơi cho e hỏi saoo e thử test theo link của anh ở case s-maxage=5 và stale-white-revalidate=5 thì sao mỗi lần request em đều phải đợi 3s hết luôn :(((
2:26 "TTFB (Time To First Byte) will be slower than getStaticProps". Chừng build production mới thấy rõ anh nhỉ. Phần cache: - Làm sao để tìm được dòng "Cache-Control" mình đã set ở getServerSideProps trong Network của Chrome Dev Tool vậy anh? - Đoạn 20:23 - Em nghĩ thế này chuẩn hơn: +) Trong giai đoạn next (0-5s) (swr), nếu có request thì gọi getServerSideProps và trả lại dữ liệu mới; nếu sau 5s không có request thì cũng gọi getServerSideProps để lấy dữ liệu mới +) Như vậy khác với "stale-while-revalidate" (không chỉ định thời gian), sau 5s không có request thì không gọi getServerSideProps để lấy dữ liệu mới, chỉ tới khi có request thì trả dữ liệu cũ rồi mới gọi getServerSideProps.
hi Tân, TTFB yeah cái này lên prod mình mới thấy rõ em nhen, hoặc demo giống anh tăng cái setTimeout lên để thấy đc sự demo ngay dưới local hen. Cache-Control kia mình set được dùng cho CDN em nhen, nên chắc em phải debug trên CDN thử xem sao hen. Với state-while-revalidate=5 - Còn trong khoảng thời gian stale (5s), nó sẽ trả về dữ liệu cũ --> trigger gọi lại dữ liệu mới - Hết hạn thời gian 5s, khi nào đc request thì gọi dữ liệu mới rồi trả về. - Ko tự động gọi requests mỗi 5s nhé
@@EasyFrontend Như vậy stale-while-validate trong phần 2 là stale-while-validate trong phần 3 (có chỉ định thời gian) nhưng thời gian ở đây = số rất lớn, vd: 999999 (stale-while-validate=999999). Em nói vậy có phải không?
anh Hậu cho em hỏi một chút ạ. Giả sử trong 5s đầu data của mình là 4, thì mình reload web vẫn chạy rất nhanh Tuy nhiên trong 5s đầu tiên đó có sự update và data = 5, vậy khi user request lần đầu tiên sau 5s đổ đi (ví dụ như 5.5s) thì vẫn hiển thị là 4, lần nối tiếp theo thì data mới hiển thị là 5 phải ko ạ. (Giả như cả 2 lần này đều nằm trong khoảng 5 => 10s)
thích cách anh giải thích quá. dễ hiểu dễ hình dung dễ sợ luôn. cám ơn anh nhiều
yay cảm ơn em nhiều 😊
Bạn cho mình hỏi CDN trong trường hợp này là NextJs nó hỗ trợ luôn hay mình phải làm riêng rồi liên kết lại với NextJs? Nếu làm riêng thì bạn hướng dẫn cách liên kết được không?
hi bạn, nếu bạn dùng Vercel thì nó hỗ trợ sẵn luôn nhen
còn nếu bạn ko dùng vercel thì phải config chỗ này, bạn có thể xem thêm ở đây nha
nextjs.org/docs/pages/building-your-application/deploying/production-checklist
@@EasyFrontend cảm ơn bạn đã hỗ trợ.
Video của a content quá clear luôn, tìm bấy lâu nay chưa thấy tutorial nào chất như này. Thanks a mong a ra nhiều video hơn!!
yeahhh cảm ơn em nhiều nhé Tuấn ơi 🥰
Dạo này anh bị sml quá, hk làm đc nhiều videos hic
Cảm ơn anh, nhờ anh khai sáng mà em biết được thêm nhiều cái mới 😁
yeah ngon lành Jack ơi, hi vọng nó sẽ hữu ích cho em khi đi làm nè hehe 😊
a cho e hỏi, sao mình lấy được curl của api khi mình call trong getServerSideProps ạ, e cảm ơn ạ
a chưa hiếu ý em lắm, curl của api là gì em hen?
@@EasyFrontend curl api khi mình import vào postman ấy ạ
0:00 Giới thiệu
0:34 Bắt đầu - Server side rendering with data
1:52 getServerSideProps
3:21 Vấn đề khi sử dụng getServerSideProps
6:20 Sử dụng cache để xử lý
8:30 Sử dụng s-maxage=5
12:43 Sử dụng s-maxage=5 và stale-white-revalidate
18:31 Sử dụng s-maxage=5 và stale-white-revalidate=5
24:30 Vấn đề tiềm ẩn - Potential issues
Yeah cảm ơn em nhiều nhiều nhé Hoang Pham ơi
Số lượng video đã contribute chapter: 24 🎉
Trong trường hợp dùng "stale-while-revalidate" mà không set giá trị e thấy nó cứ ngồ ngộ thế nào anh nhỉ.
Thà chậm mà được dữ liệu đúng còn hơn là nhanh mà bị dữ liệu sai.
haha nó là bài toán em cần xử lý, tuỳ trường hợp mà em dùng cho hợp lý thôi hen 😊 kiểu dữ liệu lâu lắm mới cập nhật, mà em cứ để cập nhật thường xuyên thì cũng phí, nên mình cân đo đong đếm sao cho phù hợp em nhen
Nicee anh. Em có chú ý đến performance, có nghe qua cache, giờ nghe a giải thích mới biết thêm nhiều điều
cơ chế cache CDN là gì anh ạ. Mà sao em thấy cái này hoạt động kiểu giống vs react-query anh ạ. Em cảm ơn ạ bài giảng rất hay anh ạ
hi Cường, em đọc thêm ở đây nha
www.cloudflare.com/learning/cdn/what-is-caching
đại loại nó là một mạng lưới toàn cầu, nó cache giúp mình mấy cái static resources, để khi users cần thì nó trả về liền luôn. Ko cần qua server của mình.
Ví dụ đơn giản thế này:
Lần đầu: user --> CDN chưa có cache --> server của mình
Lần sau: user --> CDN có cache thì trả về luôn, ko lên server mình nữa
Hay quá anh ơi, em đang cực hóng video chi tiết ISR từ anh :D
yeahhh cảm ơn em nhiều nhiều nhé Nam ơi, a đang làm nội dung cho nó đây, hi vọng tối đc lên sóng haha
E dùng App Route thì làm bằng cách nào dùng getServerSideProps đc a?
em tham khảo migration docs chỗ này nhen
nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#server-side-rendering-getserversideprops
anh Hậu làm video bài bản với code pro quá! chuẩn senior thật , hóng video tiếp theo của anh
wohooo cảm ơn em nhiều nhiều nhé Minh 😊
Anh Hậu cho e hỏi cách tính "stale-while-revalidate" với ạ.
Nó được tính từ lúc req được thực hiện (tức là bắt đầu cùng với lúc cache time được tính) hay là tính từ lúc cache bắt đầu hết thời gian hả anh
hi em, cache nó nằm trên server, nên nó tính theo thời gian trên server em nhen 😉 để còn phục vụ đc cho nhiều clients khác nhau
nếu dùng s-maxage = 10 hoặc s-maxage = 5, state-while-revalidate = 5 thì 2 cái đều trả về data cũ nếu dưới 10s còn trên 10s thì đều chạy lại gSSP(), vậy 2 cái khác nhau cái gì anh nhỉ
cái đầu tiên dưới 10s sẽ ko trigger lại SSR
cái thứ 2 thì sẽ trigger lại SSR nếu fetch từ giây số 5 - giây số 10 em nha
anh ơi ví dụ s-maxage=5 hay những tham số khác liên quan đến thời gian thì nó sẽ tính từ request đầu tiên hay request cuối cùng ạ. Ví dụ 4s em f5 lại thì nó có reset lại 5s không hay là 1s sau nó đã chạy lại hàm getServerSideProps anh nhỉ
hi Nam, em lưu ý, phần thời gian này là nó tính trên phía CDN chứ ko phải dưới client của em nhen.
Trên CDN nó cứ chạy thời gian, tùy vào em request lên lúc nào, nó sẽ biết và xử lý tương ứng em hen, chứ ko phải em reload dưới client là nó đếm lại từ đầu nhen
@@EasyFrontend ủa em tưởng client load thì CDN nó mới biết để chạy thời gian chứ ạ. lạ ghê
s-maxage = 5, state-while-revalidate = 5 nếu trong giây thứ 5 mình reload nó sẽ chạy getServerSideProps() và có kết quả trong 3s thì giây thứ 8 mình reload sẽ có data mới đúng mà ko phải đợi 3s để getServerSideProps() đúng ko ạ
hợp lý em nha 👍 ở giây thứ 8 em mà reload thì sẽ thấy nội dung mới vì cái getSSR() nó đã chạy xong và update lại cache cho mình
anh ơi cho em hỏi với ạ mình dùng s-maxage=5 và stale-white-revalidate=5
lúc đầu mình có title =4 sau đó mình vào mình thay đổi title= 5 mà mình reload page ở giây thứ 6 thì cái title mình hiện ra màn hình là số mấy ạ
0-5 giây đầu: trả về từ cache là số 4
6-10s: trả về cache số 4, sau đó âm thầm bên dưới build lại page và có được title=5
request sau sẽ thấy title=5, thay vì 4 nha Phát
@@EasyFrontend Thank anh
@@EasyFrontend z là trong khoảng 6-10s: lúc đầu hiện ra title=4 sau đó ở những lần request sau ( cũng trong khoảng 6-10s) nó hiện title=5 luôn hả anh?
dạ anh ơi, cho em hỏi là thời gian s-maxage và swr là tương ứng cho từng user, hay là tính chung (ví dụ mình set time là 5s -> user 1 request -> lưu vào cache -> giây thứ 2 có user 2 request -> trả về từ cache) luôn ạ. Em cảm ơn anh
à nó là chung em nha, chứ hk phải cho từng user nhé 😉
Hi anh, cho em hỏi, thay vì mình set "s-maxage=5, stale-while-revalidate=5" thì mình set "s-maxage=10", nó sẽ khác nhau như nào anh ha :D
à nếu vậy em tăng thời gian ở giai đoạn (s-maxage) như anh mô tả trong cái bảng từ 5 lên 10 em nhen
còn lại ko thay đổi hehe
tức lúc đầu thay vì chỉ có 5s, thì giờ trong khoảng 10s đầu, mình sẽ trả về từ cache ngay lập tức luôn hehee
anh ơi cho e hỏi saoo e thử test theo link của anh ở case s-maxage=5 và stale-white-revalidate=5 thì sao mỗi lần request em đều phải đợi 3s hết luôn :(((
em test dưới local hay trên prod em hen?
@@EasyFrontend E test trên prod luôn anhh. Em test lần đầu thì được nhưng sao khi e request lại nhiều lần sau thì lúc nào cũng đợi 3s hết :(((
Em test bằng link demo trong slide của anh và em cũng tự làm 1 link deploy lên vercel luôn. Em test thử 2 cái thì kết quả cũng như z :((
2:26 "TTFB (Time To First Byte) will be slower than getStaticProps". Chừng build production mới thấy rõ anh nhỉ.
Phần cache:
- Làm sao để tìm được dòng "Cache-Control" mình đã set ở getServerSideProps trong Network của Chrome Dev Tool vậy anh?
- Đoạn 20:23 - Em nghĩ thế này chuẩn hơn:
+) Trong giai đoạn next (0-5s) (swr), nếu có request thì gọi getServerSideProps và trả lại dữ liệu mới; nếu sau 5s không có request thì cũng gọi getServerSideProps để lấy dữ liệu mới
+) Như vậy khác với "stale-while-revalidate" (không chỉ định thời gian), sau 5s không có request thì không gọi getServerSideProps để lấy dữ liệu mới, chỉ tới khi có request thì trả dữ liệu cũ rồi mới gọi getServerSideProps.
hi Tân,
TTFB yeah cái này lên prod mình mới thấy rõ em nhen, hoặc demo giống anh tăng cái setTimeout lên để thấy đc sự demo ngay dưới local hen.
Cache-Control kia mình set được dùng cho CDN em nhen, nên chắc em phải debug trên CDN thử xem sao hen.
Với state-while-revalidate=5
- Còn trong khoảng thời gian stale (5s), nó sẽ trả về dữ liệu cũ --> trigger gọi lại dữ liệu mới
- Hết hạn thời gian 5s, khi nào đc request thì gọi dữ liệu mới rồi trả về.
- Ko tự động gọi requests mỗi 5s nhé
@@EasyFrontend Như vậy stale-while-validate trong phần 2 là stale-while-validate trong phần 3 (có chỉ định thời gian) nhưng thời gian ở đây = số rất lớn, vd: 999999 (stale-while-validate=999999). Em nói vậy có phải không?
khi nào thì có code sharing github repo vậy anh
à em lên github của anh, search cái reo nextjs là sẽ có em nhen hihi
anh Hậu cho em hỏi một chút ạ.
Giả sử trong 5s đầu data của mình là 4, thì mình reload web vẫn chạy rất nhanh
Tuy nhiên trong 5s đầu tiên đó có sự update và data = 5, vậy khi user request lần đầu tiên sau 5s đổ đi (ví dụ như 5.5s) thì vẫn hiển thị là 4, lần nối tiếp theo thì data mới hiển thị là 5 phải ko ạ. (Giả như cả 2 lần này đều nằm trong khoảng 5 => 10s)
hi Huy, em xem cái slide của anh có mô tả khúc này em nhen, nó hơi khác nhau nếu có và ko có stale-while-revalidate em hen
a Hậu ơi cài cái lệnh gõ git nhanh như a kiểu gì thế ạ :D
à nó là git alias em nhen, bên zsh mới có hehe, anh đang dùng mac hehe
Có link git ko a Hậu ơi 😂
đây nha em ơi hehee
github.com/paulnguyen-mn/learn-nextjs