Skip to content

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 91 commits into from
Jul 9, 2024
Merged

feat: single-pass hydration #12335

merged 91 commits into from
Jul 9, 2024

Conversation

Rich-Harris
Copy link
Member

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 the hydrate_nodes array, and once as we create effects and add event listeners. In this PR, we skip the first part — we keep a single hydrate_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

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with feat:, fix:, chore:, or docs:.
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests and linting

  • Run the tests with pnpm test and lint the project with pnpm lint

Copy link
Contributor

@trueadm trueadm left a 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.

@Rich-Harris
Copy link
Member Author

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

@Rich-Harris Rich-Harris merged commit 2789a3c into main Jul 9, 2024
9 checks passed
@Rich-Harris Rich-Harris deleted the single-pass-hydration branch July 9, 2024 15:39
@Rich-Harris Rich-Harris mentioned this pull request Jul 9, 2024
5 tasks
@vipero07
Copy link

#12422 I think is related to this change.

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
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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants