79464763

Date: 2025-02-24 20:50:36
Score: 1
Natty:
Report link

Hydration is react process, next sets it up and has handle reporting hydration errors, but the hydration process itself is wholly a react concept.

Does Next.js compare an internal data structure (like a virtual DOM) with the actual DOM, performing a component-by-component comparison? Or is it simply comparing the server-generated HTML string with what would be rendered on the client?

The former, as part of the normal rendering process (not hydration) react renders components into a virtual DOM, and then diffs that VDOM against the actual DOM and where a difference is found, mutates the actual DOM to be consistent with the VDOM.

Hydration is essentially the same process: the component tree is rendered resulting in a VDOM which is diff'd with the actual dom. Only when detecting a difference, an error is reported as it indicates that the server rendered HTML doesn't represent the same DOM that the client side render produced.

Reasons:
  • Long answer (-0.5):
  • No code block (0.5):
  • Contains question mark (0.5):
  • Low reputation (0.5):
Posted by: Ryan Jenkins