[rfc] Insert empty text node during hydration #22803
Conversation
|
Comparing: 149b420...f898b8c Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
facebook-github-bot
added
CLA Signed
React Core Team
|
The general principle is that we try to avoid modifying the DOM during hydration if possible because otherwise you may trigger a layout pass when nothing has changed from the original layout or unnecessarily early. I think before the throw we still ended up inserting it as a compromise. The ideal solution would be that the client doesn’t insert empty text node and so there’s no need to hydrate one. There’s a comment in the code about that. So the previous solution wasn’t ideal but at least they’re all inserted at once. By doing it on the render phase, you risk triggering layout once per frame. I’d say each frame during hydration you discover another empty text node. That has the potential to really slow down hydration in bad cases. One consideration. |
That makes sense.
Right, we would end up doing an insertion. So in this particular case just fallback to the old behavior: client-render the rest of the tree (and throw away the SSR content for the remaining tree)?
I see, so we recommend people not to output empty strings at least in SSR? |
No, React could do that automatically. There's no point in us inserting an empty text node. It's just an artifact of the implementation details and it makes it easier (faster) to update when text content changes. |
|
Ah okay good point. I'll look into that |
Summary
When we server render an empty string from the server the browser does not create a text node for the empty string. This leads to a hydration mismatch. Since #22629 we now throw on mismatches and fallback to client render. This causes empty strings to always lead to client rendering #22784. This diff adds logic in hydration to insert an empty text node if there isn't one already when processing a fiber for an empty string text node. If we do another pass and see the empty text node again then it should be there already so we use the previously created one.
How did you test this change?
jest