Chỗ check !postId return notFound hình như hơi bị thừa nhỉ, (Good to know: notFound is not needed for fallback: false mode as only paths returned from getStaticPaths will be pre-rendered.)
anh Hậu cho em hỏi case api cần có token để get data (mà token nằm trong LS) thì đâu dùng getStaticProps hay getServerProps được mà phải dùng CSR phải k ạ, cảm ơn a^^
với getServerSideProps thì được em nha, vì nó là run-time requests, nên em có thể truyền dữ liệu lên được, còn getStaticProps là build time nên lúc đó ko có dữ liệu gì của users cả. best practice là mọi private data mình xử lý hết bên client side cho khỏe em nhen nếu có case nào quá đb thì có thể trao đổi thêm với a hen
Ở cỡ phút 21 nếu như có catch all routes thì fallback sẽ không có tác dụng hả a Hậu. E có thử chỗ props PostDetailPage khi !post return 1 div có thông tin thì nó cũng không chạy vào đó mà nhảy qua catch all routes luôn. Vậy có phải là fallback sẽ bỏ qua cái route detail, nếu k có route phù hợp thì sẽ nhảy qua not found? Đã thử và nhảy qua not found nhưng k biết đúng cơ chế vậy không nên e hỏi lại cho chắc.
@@EasyFrontend Tức là: Đối với cách cấu trúc folder mà trong posts vừa có single parameters([postId].tsx) & catch all routes parameters([...params].tsx) Mà trong [postId].tsx có function getStaticPaths với return { ... fallback: false } thì trong trường hợp của mình đang làm. Đối với PostDetailPage parameter post không tồn tại mà mình return not_found thì sẽ k có tác dụng. Nó sẽ nhảy qua catch all route. => Có phải là do ưu tiên của catch all route hơn so với single parameter return not found k ạ.
Em có thắc mắc một chút mong a Hậu giải đáp ạ. Khi mình chạy build nó sẽ build ra những file tĩnh thì khi API thay đổi nó có tự thay đổi theo không hay mình phải build lại ạ. Cảm ơn a
à mình sẽ cần build lại em nhen 😉 nếu em cần lấy dữ liệu mới nhất theo từng request thì có thể dùng SSR, nhưng perf lại phải cân nhắc cho trường hợp này, nên mình sẽ dùng ISR là cái giải pháp có thể là tốt nhất cho mình em nhen. ban đầu build ra 1 vài trang và cache một khoảng thời gian, hết thời gian đó, đi fetch lại API và generate lại HTML mới hehe, hóng các videos tiếp theo em nhen 😍
Hi anh Hậu, cho em hỏi là e dùng ssg khi mà e tạo trang chi tiết sản phẩm thay vì e đặt là [slug].tsx thì e đặt là index.tsx sau đó e truyền id sản phẩm vào params, e lấy id đó call api để lấy thông tin sản phẩm chứ không dùng getStaticPaths có được không ạ
à em vẫn phải học reactjs trước em nha, xong mới tới NextJS. không gấp đc em nhé, em đốt cháy giai đoạn thì dễ lãnh hậu quả về sau lắm đó. Với em chưa có kinh nghiệm thì team nên có lead đã có kinh nghiệm, em hỗ trợ thôi nhen 😉
@Hậu Nguyễn Hiểu nôm na việc nextjs tạo ra các file json chung với file html để tránh việc bị full page reload đúng k a Hậu nhỉ, nếu đúng thì a có thể giải thích đơn giản cơ chế của nó ngăn việc full page reload k ạ, cảm ơn a^^
yeah đúng òi á em nextjs vẫn dùng client side navigation mỗi lần từ page A sang page B, nó fetch json là component props cần để truyền cho page B như vậy khi click chuyển sang trang B, nó có dữ liệu đầu vào để mình có thể render trang B em nhen hk biết có giải thích đc cho em chưa ?
Cho e hỏi là sao không nó tải các file html về mà chỉ thấy nó tải file json về vậy ạ, em thấy anh có 10 id và build ra được 10 file html và 10 file json, nhưng trên trình duyệt thấy load mỗi file json à
hi em, html là nếu em fetch page đó đầu tiên nó trả về html luôn còn khi em navigate tới, thì nó ko load html, mà chỉ cần fetch json là đủ info để nó thực hiện navigation em nha
Em có 1 chút thắc mắc mong anh Hậu giải đáp ạ. Ở ngoài file index.ts mình đã gọi API để lấy 10 bài viết rồi. Sau đó trong file postId ở hàm getStaticPaths mình lại gọi API để lấy lại 10 bài viết đó thì liệu có phải là dư thừa không ạ? Trong khi mình chỉ cần lấy cái ID của bài viết mà mình muốn xem chi tiết.
à đó là trong hoàn cảnh em đi từ trang list nhưng ví dụ em bạn em gửi cho mình link của trang details em mở trang đó lên, thì mình sẽ ko có data em nhen thêm một điểm nữa, dữ liệu từ list, đôi khi nó ko đủ full data, mà phải gọi API details mới có đầy đủ (nếu cái details đó có quá nhiều thông tin) thành ra cứ luôn gọi là đơn giản nhất em nhen, ko cần phải xử lý nhiều trường hợp, rồi routing passing params, ...
24:56 Anh cho em hỏi khi lần đầu mình click vào 1 dòng nó chuyển đến trang chi tiết của post đấy. Sau đó back lại về trang posts thì em thấy nó gọi 1 file posts.json. Nhưng nếu tiếp tục làm click vào 1 dòng khác để đến post khác và quay lại thì file posts.json không được gọi nữa, anh cho em hỏi tại sao lại thế ạ?
Anh ơi ở 24:42 cho em hỏi mỗi lần bên UI em hover qua cái item nào là nó lại fetch json của cái item luôn ấ nó không có fetch 1 lần như anh nói ở video trước. e có thử cho prefetch = false mà nó cũng vậy luôn. Anh có thể xem giúp em được kh anh
Em có thử mò thì nếu em dùng component Link để Link qua page mà có sử dụng hàm getStaticProps thì nó lại bị tình trạng như v nhưng mà e vẫn chưa biết cách fix :((
Em muốn truyền context.params thông qua props trong getStaticProps (thay vì dùng useRouter). Em code thế này return { props: { post: { title: "post title sample", body: "post body sample", }, postId: context.params, }, }; Trong quá trình npm run build bài này của em, em dính lỗi này "Error occurred prerendering page "/dynamic/1". Error: Minified React error #31". Anh từng gặp chưa?
@@EasyFrontend anh ơi em cũng bị vấn đề giống b nhưng e vẫn chưa hiểu ý anh chỉ fetch lần đầu là saoo anhh?. Em thử hover bao nhiêu lần thì nó cứ fetch lại cái json của item đó bấy nhiêu lần luôn ấ anh.
Chỗ check !postId return notFound hình như hơi bị thừa nhỉ, (Good to know: notFound is not needed for fallback: false mode as only paths returned from getStaticPaths will be pre-rendered.)
hợp lý, cảm ơn bạn đã chỉ ra chỗ này nhen ❤️
0:00 Giới thiệu
0:07 Overview
1:28 getStaticPaths
4:45 Code example
Yeah cảm ơn em nhiều nhiều nhé Hoang Pham ơi
Số lượng video đã contribute chapter: 22🎉
Cảm ơn anh nhiều ạ! ^ ^
anh Hậu cho em hỏi case api cần có token để get data (mà token nằm trong LS) thì đâu dùng getStaticProps hay getServerProps được mà phải dùng CSR phải k ạ, cảm ơn a^^
với getServerSideProps thì được em nha, vì nó là run-time requests, nên em có thể truyền dữ liệu lên được, còn getStaticProps là build time nên lúc đó ko có dữ liệu gì của users cả.
best practice là mọi private data mình xử lý hết bên client side cho khỏe em nhen
nếu có case nào quá đb thì có thể trao đổi thêm với a hen
Ở cỡ phút 21 nếu như có catch all routes thì fallback sẽ không có tác dụng hả a Hậu.
E có thử chỗ props PostDetailPage khi !post return 1 div có thông tin thì nó cũng không chạy vào đó mà nhảy qua catch all routes luôn. Vậy có phải là fallback sẽ bỏ qua cái route detail, nếu k có route phù hợp thì sẽ nhảy qua not found? Đã thử và nhảy qua not found nhưng k biết đúng cơ chế vậy không nên e hỏi lại cho chắc.
hi em, anh chưa rõ context của em lắm
cho anh hỏi là hiện em dùng thuộc tính fallback với giá trị gì em hen?
@@EasyFrontend Tức là:
Đối với cách cấu trúc folder mà trong posts vừa có single parameters([postId].tsx) & catch all routes parameters([...params].tsx)
Mà trong [postId].tsx có function getStaticPaths với return { ... fallback: false } thì trong trường hợp của mình đang làm.
Đối với PostDetailPage parameter post không tồn tại mà mình return not_found thì sẽ k có tác dụng.
Nó sẽ nhảy qua catch all route.
=> Có phải là do ưu tiên của catch all route hơn so với single parameter return not found k ạ.
Em có thắc mắc một chút mong a Hậu giải đáp ạ. Khi mình chạy build nó sẽ build ra những file tĩnh thì khi API thay đổi nó có tự thay đổi theo không hay mình phải build lại ạ. Cảm ơn a
à mình sẽ cần build lại em nhen 😉
nếu em cần lấy dữ liệu mới nhất theo từng request thì có thể dùng SSR, nhưng perf lại phải cân nhắc cho trường hợp này, nên mình sẽ dùng ISR là cái giải pháp có thể là tốt nhất cho mình em nhen.
ban đầu build ra 1 vài trang và cache một khoảng thời gian, hết thời gian đó, đi fetch lại API và generate lại HTML mới hehe, hóng các videos tiếp theo em nhen 😍
@@EasyFrontend Dạ. thanks a nhiều ạ.
Có cách nào mua luôn khóa này không ạ, Kiểu em học không có liên tục được ý :((
hi em, hiện series này nó chỉ có trên youtube thôi nè hic
em có thể tạm ngưng membership, khi nào có thời gian lại thì tiếp tục em nhen 😍
hay quá a ơi
Hi anh Hậu, cho em hỏi là e dùng ssg khi mà e tạo trang chi tiết sản phẩm thay vì e đặt là [slug].tsx thì e đặt là index.tsx sau đó e truyền id sản phẩm vào params, e lấy id đó call api để lấy thông tin sản phẩm chứ không dùng getStaticPaths có được không ạ
hi Long, em làm vậy là nó thành server side rendering luôn òi nhen, tại query params là runtime luôn òi 😉
@@EasyFrontend vậy mình phải lưu token trong cookie hả a, e thấy getStaicPaths không lấy token trong localhost được
nên học next Js trước hay ReatJs trước anh...hiện tại đang cần chiến gấp dự án next Js
mà e chưa biết gì
à em vẫn phải học reactjs trước em nha, xong mới tới NextJS.
không gấp đc em nhé, em đốt cháy giai đoạn thì dễ lãnh hậu quả về sau lắm đó.
Với em chưa có kinh nghiệm thì team nên có lead đã có kinh nghiệm, em hỗ trợ thôi nhen 😉
Anh ơi, Nextjs 13. getStaticPaths nó không hoạt động!!! Giúp em với
hi Cường, em fix đc chưa, nếu chưa thì ping a qua messenger nhen
@Hậu Nguyễn Hiểu nôm na việc nextjs tạo ra các file json chung với file html để tránh việc bị full page reload đúng k a Hậu nhỉ, nếu đúng thì a có thể giải thích đơn giản cơ chế của nó ngăn việc full page reload k ạ, cảm ơn a^^
yeah đúng òi á em
nextjs vẫn dùng client side navigation
mỗi lần từ page A sang page B, nó fetch json là component props cần để truyền cho page B
như vậy khi click chuyển sang trang B, nó có dữ liệu đầu vào để mình có thể render trang B em nhen
hk biết có giải thích đc cho em chưa ?
❤
Cho e hỏi là sao không nó tải các file html về mà chỉ thấy nó tải file json về vậy ạ, em thấy anh có 10 id và build ra được 10 file html và 10 file json, nhưng trên trình duyệt thấy load mỗi file json à
hi em, html là nếu em fetch page đó đầu tiên
nó trả về html luôn
còn khi em navigate tới, thì nó ko load html, mà chỉ cần fetch json là đủ info để nó thực hiện navigation em nha
Em có 1 chút thắc mắc mong anh Hậu giải đáp ạ. Ở ngoài file index.ts mình đã gọi API để lấy 10 bài viết rồi. Sau đó trong file postId ở hàm getStaticPaths mình lại gọi API để lấy lại 10 bài viết đó thì liệu có phải là dư thừa không ạ? Trong khi mình chỉ cần lấy cái ID của bài viết mà mình muốn xem chi tiết.
à đó là trong hoàn cảnh em đi từ trang list
nhưng ví dụ em bạn em gửi cho mình link của trang details
em mở trang đó lên, thì mình sẽ ko có data em nhen
thêm một điểm nữa, dữ liệu từ list, đôi khi nó ko đủ full data, mà phải gọi API details mới có đầy đủ (nếu cái details đó có quá nhiều thông tin)
thành ra cứ luôn gọi là đơn giản nhất em nhen, ko cần phải xử lý nhiều trường hợp, rồi routing passing params, ...
@@EasyFrontend Oki e hiểu rồi ạ. E cám ơn anh
a cho e hỏi là config scss như thế nào và để thư mục scss ở đâu ạ. e để scss thì không import đc. phải để module.scss mới đc mà không deploy đc
em tham khảo chỗ SASS support nhé Khoa
nextjs.org/docs/basic-features/built-in-css-support#sass-support
24:56 Anh cho em hỏi khi lần đầu mình click vào 1 dòng nó chuyển đến trang chi tiết của post đấy. Sau đó back lại về trang posts thì em thấy nó gọi 1 file posts.json. Nhưng nếu tiếp tục làm click vào 1 dòng khác để đến post khác và quay lại thì file posts.json không được gọi nữa, anh cho em hỏi tại sao lại thế ạ?
à nó chưa có info để render trang list
nên lần đầu render nó cần fetch cái posts.json
những lần sau thì nó đã có sẵn òi nên nó ko fetch nữa em nhen 😉
Anh ơi ở 24:42 cho em hỏi mỗi lần bên UI em hover qua cái item nào là nó lại fetch json của cái item luôn ấ nó không có fetch 1 lần như anh nói ở video trước. e có thử cho prefetch = false mà nó cũng vậy luôn. Anh có thể xem giúp em được kh anh
Em có thử mò thì nếu em dùng component Link để Link qua page mà có sử dụng hàm getStaticProps thì nó lại bị tình trạng như v nhưng mà e vẫn chưa biết cách fix :((
hi em, hk biết là em test dưới local hay trên production em hen?
@@EasyFrontend Hi anh, em cũng gặp tình trạng giống bạn. Em đang test trên production anh ạ.
Anh ơi cho em xin slide bài giảng của cả khóa học này với ạ. Em cảm ơn anh
hi em, em check trong phần mô tả sẽ có link drive em nhen 😉
Cho em hỏi mình load env bên client side như thế nào vậy anh
Đây em tham khảo link này nhen Tiến
nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
Em muốn truyền context.params thông qua props trong getStaticProps (thay vì dùng useRouter).
Em code thế này
return {
props: {
post: {
title: "post title sample",
body: "post body sample",
},
postId: context.params,
},
};
Trong quá trình npm run build bài này của em, em dính lỗi này "Error occurred prerendering page "/dynamic/1". Error: Minified React error #31". Anh từng gặp chưa?
à cái này thì anh chưa gặp òi Tân, em fix xong share cho anh với nhé 😉
Anh ơi cho em hỏi mỗi lần bên UI em hover qua cái item nào là bên tab network nó lại fetch json của cái item đó vậy ạ? Mọi người có ai bị như em ko?
yeah đúng òi em nhen, hình như cái này a có nói trong video nào òi thì phải hehe, mà nó fetch lần đầu à, nên em yên tâm nhen 😉
@@EasyFrontend anh ơi em cũng bị vấn đề giống b nhưng e vẫn chưa hiểu ý anh chỉ fetch lần đầu là saoo anhh?. Em thử hover bao nhiêu lần thì nó cứ fetch lại cái json của item đó bấy nhiêu lần luôn ấ anh.
@@thongduong2200 Hi, mình cũng gặp vấn đề như bạn. Không biết bạn có câu trả lời chưa chỉ mình với.
@@quangthuan1172 Mình cũng vậy
em mới post 1 câu hỏi trong group trao đổi Easy frontend, anh Hậu duyệt giúp em và help em với được không ạ :(
à okie em nhen Cường, a approve rồi nha, để mn trao đổi xíu rồi a tl sau hen 😉
@@EasyFrontend dạ vâng em cảm ơn anh ạ. Chắc e phải mua khóa js của anh học lại mới đc :(