Why does Next.JS reconcile DOM with RSC Payload before hydrate
Answered
Checkered Giant posted this in #help-forum
Checkered GiantOP
Hello, i am noob of nextjs.
I was reading a document about NextJS's Rendering.
https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered
I can't understand 2nd step on client side. 'The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.'
I think like this: html had been pre-rendered on the server and it has been served to the client. so it should be hydrated first to match the real dom between react dom.
May i know how Next.JS reconcile with RSC Payload on the client-side and why should it before hydration.
I was reading a document about NextJS's Rendering.
https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered
I can't understand 2nd step on client side. 'The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.'
I think like this: html had been pre-rendered on the server and it has been served to the client. so it should be hydrated first to match the real dom between react dom.
May i know how Next.JS reconcile with RSC Payload on the client-side and why should it before hydration.
Answered by joulev
basically, since the page is entirely static with interactive "holes", the payload is used to determine where those holes are. then react would only hydrate those holes making hydration faster (compared to the usual way of hydrating the entire page which can be slow if your page has lots of static elements, such as icons)
6 Replies
@Checkered Giant Hello, i am noob of nextjs.
I was reading a document about NextJS's Rendering.
https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered
I can't understand 2nd step on client side. 'The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.'
I think like this: html had been pre-rendered on the server and it has been served to the client. so it should be hydrated first to match the real dom between react dom.
May i know how Next.JS reconcile with RSC Payload on the client-side and why should it before hydration.
basically, since the page is entirely static with interactive "holes", the payload is used to determine where those holes are. then react would only hydrate those holes making hydration faster (compared to the usual way of hydrating the entire page which can be slow if your page has lots of static elements, such as icons)
Answer
@joulev basically, since the page is entirely static with interactive "holes", the payload is used to determine where those holes are. then react would only hydrate those holes making hydration faster (compared to the usual way of hydrating the entire page which can be slow if your page has lots of static elements, such as icons)
Checkered GiantOP
thanks for the answer
@joulev basically, since the page is entirely static with interactive "holes", the payload is used to determine where those holes are. then react would only hydrate those holes making hydration faster (compared to the usual way of hydrating the entire page which can be slow if your page has lots of static elements, such as icons)
Checkered GiantOP
then is nextjs always exclude server components in reconciliation after hydrate?
@Checkered Giant then is nextjs always exclude server components in reconciliation after hydrate?
I don’t know the technical details but basically the reconciliation step is for react to know what to hydrate and what to leave as-is basically
That’s how I understand it
@joulev That’s how I understand it
Checkered GiantOP
i see. thanks joulev!