-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
feat: single-pass hydration #12335
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
feat: single-pass hydration #12335
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
trueadm
approved these changes
Jul 9, 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a lot going on here, but it looks good to me.
trueadm
reviewed
Jul 9, 2024
Just realised hydration boundaries are unbalanced in some cases which could lead to incorrect behaviour in the case of mismatches — need to add a couple more tests |
#12422 I think is related to this change. |
5 tasks
dummdidumm
added a commit
that referenced
this pull request
Jul 15, 2024
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs Fixes #12422
5 tasks
dummdidumm
added a commit
that referenced
this pull request
Jul 15, 2024
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs Fixes #12422
dummdidumm
added a commit
that referenced
this pull request
Jul 15, 2024
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs Fixes #12422
Rich-Harris
pushed a commit
that referenced
this pull request
Jul 16, 2024
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs Fixes #12422
trueadm
pushed a commit
that referenced
this pull request
Jul 16, 2024
We've marked several methods used for walking the DOM with a `__NO_SIDE_EFFECTS__` comment. That was good historically, because we didn't need those kept around if its results were unused, but since the hydration changes in #12335 this actually introduces a bug: Because that PR now relies on the hydration nodes being correct due to walking the DOM, tree-shaking unused variables/calls results in the walk being incorrect, leading to bugs Fixes #12422
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I'm a firm believer that hydration is a better way to make a server-rendered app interactive than the various contortions people perform in order to avoid it, as long as you can do it fast.
This PR reduces DOM size and significantly improves hydration speed (as in, like, 40% faster).
The key insight is that
node.nextSibling
is (surprisingly!) the most expensive part of hydration. Right now, we're doing that twice: once to build up thehydrate_nodes
array, and once as we create effects and add event listeners. In this PR, we skip the first part — we keep a singlehydrate_node
updated as we hydrate the application.One neat side-effect of this change is that each blocks no longer need hydration comments for each item, just for the each block itself.
There's a fair bit of tidying up that needs to happen, and possibly some room for further optimisations.
Before submitting the PR, please make sure you do the following
feat:
,fix:
,chore:
, ordocs:
.Tests and linting
pnpm test
and lint the project withpnpm lint