Có khá nhiều cách để fix cái lỗi trên, anh em cũng có thể tham khảo thêm các cách fix ở đây và chọn cách hợp nhất với bản thân nhé: nextjs.org/docs/messages/react-hydration-error 🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super 📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free
hello anh, em đang dùng styled-components nên không thể sử dụng ở server, mà cần "use client" dẫn đến page của em k thể ở dạng static rendering được. có giải pháp nào ở đây không ạ hay là styled-componet không được support ở use server Next14 này ạ
anh đã bỏ stled component từ rất lâu rồi. Nó cũng càng ít người dùng. chuyển sang tailwind cho khỏe Nên việc styled component có support server next.js không thì anh không test
Chào anh ạ. em có thắc mắc giờ trong dự án có chia ra cả các page dạng public ( homePage... ) và dạng dashboard thì nên chia thư mục như nào vậy ạ. hay code 2 dự án nextjs riêng vậy anh ạ
Dạ anh cho em hỏi là với những trang product list sẽ có các optional filters thì buộc mình faj dùng flag use client để có thể xài useSearchParams để sync URL và nó cũng là dynamic render luôn thì cách xử lý này có ảnh hưởng ko tốt đến SEO cho trang này nhiều ko anh? Nếu là client compt thì triển khai metadata như thế nào là hợp lý ạ? Em đang triển khai tanstack query cho trang này ạ. Tin tưởng anh nên em đã preorder khoá nextjs anh vừa ra mắt.🎉 Thanks anh.
nếu mà em dùng hook useSearchParams thì cái component của em đã thành client component rồi. nghĩa là em fetch api ở client => data không được render html sẵn ở server => không tốt cho seo nhé. Mấy cái filter trên thì mỗi lẫn chọn các option filter thì em change url param, rồi khi nhấn button filter thì em dùng router.refresh chẳn hạn, mục đích để yêu cầu server component refresh rerender lại, và trong server component vẫn dùng được các query param thông qua Props page mà
@@duocdev Dạ anh cho em hỏi thêm là nếu mình dùng tanstack query và bọc Provider ở Rootlayout thì các child component có bị mất đi hoặc giảm hiệu suất server side ko ạ?
Dạ anh cho em hỏi cái này với ạ. Kiểu em có một cái landing page dùng NextJS để phục vụ cho việc tối ưu SEO. Nhưng trong landing page đó em muốn sử dụng một số animation (kiểu fade-in/out) cho các paragraph để nâng cao thẩm mỹ của website. Mà việc dùng Framer Motion như thế thì the em nghĩ nó khiến cho landing page của mình trở thành 'use client' (để dùng được hooks của Framer) thì sẽ khá tệ về SEO khi so với server component ạ. Anh có thể chia sẻ suy nghĩ của anh về vấn đề này cũng như với kinh nghiệm của anh thì anh sẽ làm như nào được không ạ? Em cảm ơn anh ạ!
use client không hẳn là tệ với SEO đâu. Nếu em dùng use client nhưng vẫn đảm bảo cái landing page của em nó là static rendering và các thành phần component trong landing page của em cũng được static rendering thì SEO không bị giảm
@@duocdev với usecase này mình nên call api revalidate khi update/create product tại cms hay sao anh? Nếu mà call api này trên FE thì mỗi lần usser truy cập page đều faj call api này. Đây có faj là best practice ko anh? Thank anh
Có khá nhiều cách để fix cái lỗi trên, anh em cũng có thể tham khảo thêm các cách fix ở đây và chọn cách hợp nhất với bản thân nhé:
nextjs.org/docs/messages/react-hydration-error
🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super
📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free
Cảm ơn bạn vì khoá học nextjs miễn phí này, chúc bạn sức khoẻ và thành công trong cuộc sống.
cảm ơn bạn
hello anh, em đang dùng styled-components nên không thể sử dụng ở server, mà cần "use client" dẫn đến page của em k thể ở dạng static rendering được.
có giải pháp nào ở đây không ạ
hay là styled-componet không được support ở use server Next14 này ạ
anh đã bỏ stled component từ rất lâu rồi. Nó cũng càng ít người dùng. chuyển sang tailwind cho khỏe
Nên việc styled component có support server next.js không thì anh không test
Chào anh ạ. em có thắc mắc
giờ trong dự án có chia ra cả các page dạng public ( homePage... ) và dạng dashboard thì nên chia thư mục như nào vậy ạ. hay code 2 dự án nextjs riêng vậy anh ạ
tạo 2 folder là `(public)` và `admin` chẳn hạn, gọp chung 1 source cũng đc. Chia ra 2 source cũng đc, gọp thì code nhanh hơn.
Dạ anh cho em hỏi là với những trang product list sẽ có các optional filters thì buộc mình faj dùng flag use client để có thể xài useSearchParams để sync URL và nó cũng là dynamic render luôn thì cách xử lý này có ảnh hưởng ko tốt đến SEO cho trang này nhiều ko anh?
Nếu là client compt thì triển khai metadata như thế nào là hợp lý ạ?
Em đang triển khai tanstack query cho trang này ạ.
Tin tưởng anh nên em đã preorder khoá nextjs anh vừa ra mắt.🎉
Thanks anh.
nếu mà em dùng hook useSearchParams thì cái component của em đã thành client component rồi. nghĩa là em fetch api ở client => data không được render html sẵn ở server => không tốt cho seo nhé.
Mấy cái filter trên thì mỗi lẫn chọn các option filter thì em change url param, rồi khi nhấn button filter thì em dùng router.refresh chẳn hạn, mục đích để yêu cầu server component refresh rerender lại, và trong server component vẫn dùng được các query param thông qua Props page mà
@@duocdev Dạ anh cho em hỏi thêm là nếu mình dùng tanstack query và bọc Provider ở Rootlayout thì các child component có bị mất đi hoặc giảm hiệu suất server side ko ạ?
@@keepitreal-js7li không em nhé
Dạ anh cho em hỏi cái này với ạ. Kiểu em có một cái landing page dùng NextJS để phục vụ cho việc tối ưu SEO. Nhưng trong landing page đó em muốn sử dụng một số animation (kiểu fade-in/out) cho các paragraph để nâng cao thẩm mỹ của website. Mà việc dùng Framer Motion như thế thì the em nghĩ nó khiến cho landing page của mình trở thành 'use client' (để dùng được hooks của Framer) thì sẽ khá tệ về SEO khi so với server component ạ.
Anh có thể chia sẻ suy nghĩ của anh về vấn đề này cũng như với kinh nghiệm của anh thì anh sẽ làm như nào được không ạ?
Em cảm ơn anh ạ!
use client không hẳn là tệ với SEO đâu. Nếu em dùng use client nhưng vẫn đảm bảo cái landing page của em nó là static rendering và các thành phần component trong landing page của em cũng được static rendering thì SEO không bị giảm
@@duocdev dạ em cảm ơn anh ạ ❤
a ơi a làm product thành static rendering thì thêm với sửa sp nó bị cache k hiện list mới nhất rồi a
Chính xác em. Vậy nên em cần làm 1 cái api để revalidate khi em update product để nó build lại html
@@duocdev api này viết ở next server hả a, e chưa nắm rõ lắm a hướng dẫn chi tiết được k ạ
@@vanhoantran1628 dùng cái này em: nextjs.org/docs/app/api-reference/functions/revalidateTag
@@duocdev với usecase này mình nên call api revalidate khi update/create product tại cms hay sao anh? Nếu mà call api này trên FE thì mỗi lần usser truy cập page đều faj call api này. Đây có faj là best practice ko anh? Thank anh
@@keepitreal-js7li Revalidate 1 lần ở CMS là đc thôi em. User FE cần gì call liên tục