fix: defer hydration until suspense stream is parsed - #2304
Conversation
🦋 Changeset detectedLatest commit: f236571 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for solid-start-landing-page ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
commit: |
0d52e55 to
f236571
Compare
| <script | ||
| type="module" | ||
| nonce={nonce} | ||
| async |
There was a problem hiding this comment.
i feel usually this is async. This is what was causing problems?
There was a problem hiding this comment.
Seems like it @huseeiin can you verify this works?
There was a problem hiding this comment.
Seems like it @huseeiin can you verify this works?
yes its fixed
|
DO NOT MERGE. This is indictive of another bug.. a core bug most likely and probably one annoying to fix. But fundamentally we definitely do not want to block hydration until document completion. It basically negates the value of streaming as the uncanny valley covers the whole time window. Script entry should be async not deferred. In 2.0 we have smart snapshotting. In 1.x early interaction is supposed to bail out of hydration and resume the boundary as client rendering. But in all cases hydrating as soon as possible is definitely desired. This is part of the design contract. So glad I noticed before merge. Vercel accidentally did this on their first RSC edge streaming demos and people attributed it to Server Components being slow. React core team scrambled to figure out the issue. I actually identified it for them in their PR. Honestly Im not sure perception ever completely recovered from that. |
|
If guys want .. make an issue against Dom Expressions probably with the context of the original bug this was trying to fix. |
4 participants
PR Checklist
What is the current behavior?
The client entry module is marked
async, so it can hydrate while the HTML parser is still waiting for streamed Suspense content. Hydration can retain references to fallback route DOM that the stream later replaces. After reloading a detail route and navigating back, both the stale detail route and the new root route can remain rendered.What is the new behavior?
The client module now uses the default deferred execution of module scripts. It is still discovered and fetched when the parser encounters it, but hydration waits until the streamed document has been parsed.
A Playwright regression reproduces the reload-and-back sequence from #2297 and verifies that only the root route remains.
Other information
Validation completed:
pnpm --filter @solidjs/start typecheckpnpm --filter @solidjs/start test:ci(98 tests)pnpm --filter tests buildpnpm --filter tests unit:ci(5 tests)