Consider Text node in the root hydration #31097
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| while (instance.nodeType === ELEMENT_NODE) { | ||
| while ( | ||
| instance.nodeType === ELEMENT_NODE || | ||
| (inRootOrSingleton && instance.nodeType === TEXT_NODE) |
There was a problem hiding this comment.
This isn't quite right b/c the instance is refined to Element below and text nodes aren't elements. But I see what are you are trying to do. As commented below we're being somewhat conservative here but if you could make the case that there is widespread use of extensions/scripts that insert text nodes in the body before primary content then we can consider changing the heuristic
There was a problem hiding this comment.
Yeah so frameworks uses text nodes as a reference to a fragment because DocumentFragment loses their children reference when appended in the dom. Or also the React portal adds text around portal nodes.
Our use case is that pieces of the page like a header are rendered outside of React as inline scripts. We use suppressHydrationWarning for those DOM tree, but they also have portal similar implementation to render elements on the body causing the issue when the script is loaded.
example of React Portal rendered tree from the documentation as an example of the approach used
|
Thank you @gnoff for the review, and your comment make sense. We were able to remove this use case of empty text around the I have some other use cases that I am noticing causes hydration issues:
I added those use cases in this repo. I was wondering if we could add a flag on the server on the elements that needs hydration and the hydration checks only those elements (like a <html>
<script>window.__reactHydrateDataAttribute = 'a1b2c';</script>
<head></head>
<body data-rh="a1b2c">
<div></div> <!-- Added by a script -->
<div data-rh="a1b2c"></div>
</body>
</html>The random it is just to make sure it doesn't conflict, but it can be removed for simplicity. The downside is that now each element will have this, but we could also use only on the children of the |
|
@gnoff, it seems that Solid utilizes a |
Summary
When a 3rd party script adds a text node in the
body, the hydration fails instead of trying to get the next sibling to compare. With this PR thecanHydrateInstance()keeps looking for the nextSibling considering also text nodes.The issue can be viewed in this repo.
It is related to the current opening issue regarding hydration issues #24430
Frameworks usually uses text nodes as a fragment since DocumentFragment loses the reference of their children as they are appended to the DOM.
How did you test this change?
Screen.Recording.2024-09-29.at.4.26.03.PM.mov