Skip to content

Latest commit

 

History

History
33 lines (18 loc) · 1.58 KB

13.Nextjs-render-component-cua-ban-nhu-the-nao.md

File metadata and controls

33 lines (18 loc) · 1.58 KB

Next.js render component của bạn như thế nào?

Component ở đây bao gồm Server Component và Client Component

Khi chúng ta build

Mọi component dù là Server Component hay Client Component khi build đều sẽ có

  • Static HTML
  • JS Bundle
  • Ngoài ra còn có CSS Bundle, Image, Font,...

Khi request lần đầu tiên (full page load)

  1. Server Next.Js render server component và kết hợp với Client Component để tạo ra HTML để gửi về client

  2. Client ngay lập tức thấy được website nhưng chưa tương tác được với nó (ví dụ chưa click, hover,...)

  3. Trong đống JS Bundle download về có chứa React Server Component Payload (RSC Payload), cái này dùng để để render lại client component ở client, cập nhật DOM

  4. Cuối cùng là sẽ thêm các sự kiện vào các client component để tương tác với người dùng => Bước này gọi là Hydration, sau bước này thì có thể tương tác với website

React Server Component Payload là 1 data đặc biệt được render ở phía Server phục vụ cho việc đồng bộ, cập nhật DOM giữa Client Component và Server Component

Khi request lần thứ 2 (Subsequent Navigations)

Ví dụ chúng ta navigate từ /home sang /about

Thì server Next.js sẽ không trả HTML về cho chúng ta nữa mà trả React Server Component Payload (RSC Payload) và các bundle JS, CSS cần thiết.

Client sẽ tự render ra HTML

Điều này sẽ giúp việc navigation nhanh hơn, nhưng vẫn đảm bảo về SEO