Setting the record straight on hydration

[benmccann]

Anything I google related to react and hydration has the following blog post come up written by a prominent Google employee: https://addyosmani.com/blog/rehydration/

It shows the DOM being entirely destroyed and recreated as pictured below. The hydrate docs are a bit unclear about what exactly happens during hydration. They start out by saying that hydrate "is used to hydrate a container", but never explicitly define hydration. And so we must rely on blogs such as the one linked above to explain what hydration in more detail. After hours of digging through inaccurate information I'm pretty sure the above blog is terribly misleading.

If I'm right that Addy's image is incorrect, perhaps someone from Facebook could use their network to reach out and get this image corrected to reflect that the DOM is not destroyed? Otherwise, it would be helpful for React to have its own docs that explain hydration in more depth. The docs describe to some degree what happens during hydration, but not exactly why and leave a lot of ambiguity. E.g. why does hydration "patch up differences in text content" and why would such differences exist in the first place?

[threepointone]

@addyosmani This seems legitimate; React doesn't blow away the dom while rehydrating.

[addyosmani]

@threepointone Thanks for that correction. As @benmccann notes above, it's been a little unclear what the exact hydration behavior is without trying to discern this from traces or source... 😅

I can change the above screenshot so that the filmstrip doesn't convey React as blowing away the DOM and can clear up the labelling. This may also be a good opportunity to correct the post to be more accurate generally.

Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup. React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them.

Perhaps it would be clearer for my write-up to say...

• Usage of ReactDOM.hydrate() alone will not cause the DOM to be blown away as React makes an attempt to attach event listeners to existing markup. * Could you expand on what "patch up differences in text content" does? This seems relevant to cover.
• It is entirely possible for there to be differences in the content rendered between the server and the client, but React strongly encourages you to keep this as identical as possible (and expects this to be the case). Avoiding this recommendation can sometimes leave users in an uncanny valley if there are significant differences between the two.

Is that fair?

[threepointone]

Sounds good to me! React actually warns you if the content doesn't match between server and client, it's really considered an error (but not fatal, and doesn't throw).