Asked Mar 23rd, 6:35 AM 86 2 2
  • 86 2 2
+2

Thắc mắc về SSR trong Nextjs

Share
  • 86 2 2

E mới học về nextjs, và thấy để SSR trên page ta fetch data qua API trong getServerSideProps(), nhưng e thắc mắc là getServerSideProps() chỉ khả dụng trên page, chứ không dùng được trên các component con trong page, vậy làm sao để ssr khi fetch data từ API trong các component con ạ, e cảm ơn.

2 ANSWERS


Answered Mar 23rd, 6:51 AM
Accepted
+2
  • SSR bằng nextjs đại khái là content của 1 trang được render lần đầu ở phía server (khác với client side render thông thường)
  • hiểu nôm na là khi e nhập url /home => enter, toàn bộ data phục vụ việc load lần đầu tiên trang Home sẽ được fetch ở hàm getServerSideProps => render HomePageComponent ở phía server => trả về cho client 1 trang html hoàn chỉnh
  • Khi về client rồi thì HomePageComponent và các component con bên trong hoạt động như component thông thường (được khởi tạo state, có lifecycle...) => tại sao e cần fetch data trong component con, có thể ví dụ được hem ???, câu trả lời có thể là e fetch hết trong hàm getServerSideProps của component HomePageComponent rồi pass xuống con như props nhé.
Share
Answered Mar 23rd, 6:42 AM
+2

Bạn tìm hiểu về redux nhé. Tạm hiểu Redux sẽ giúp chúng ta giữ data mà page tải về vào một thành phần được gọi là state và nó cung cấp các feature giúp chia sẻ state tới các component con: reducer, action... Các component con sẽ được render lại khi mà data state thay đổi. Như vậy, bạn có thể fetch data tại page, và các component con chỉ việc lấy data từ trong state ra sử dụng.

Share
Viblo
Let's register a Viblo Account to get more interesting posts.