preact-render-to-string
preact-render-to-string copied to clipboard
Streaming renderer
This PR that adds a streaming renderer. Main difference to preact-ssr-prepass is that it only awaits suspense boundaries and keeps everything else synchronous. This avoids a flooding the event loop with microtasks.
Tried a custom element approach to attach lazy hydrated subtrees, but the more I think about it the more I'm leaning towards using comments as folks sent me more and more use cases where introducing an arbitrary element breaks CSS styling (even with display: contents) or where the semantic HTML structure falls apart (ul > li).
Marking as draft until it's ready and we might need to make modifications to core too.
⚠️ No Changeset found
Latest commit: 27dbdce91e1ea10641e86afdfe5639e08f6afdce
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
Any updates on this?
It's a blocker for using Preact with Nextjs.
Also a blocker for Remix, too.
👋 This is also a blocker for gatsby-plugin-preact users trying to upgrade to Gatsby v5, which requires React 18.
Any updates here? As stated above this is a big issue for users trying to upgrade to Gatsby v5.
Landing this PR doesn't make Preact support React's streaming renderer API, that would need to be plumbed through to preact/compat/server.
The reason we have not yet merged this PR is that it may require changes in Preact to handle client-side hydration for subtrees that are streamed out-of-order. Currently, it's likely that there is a race condition in if any suspense boundaries encountered during hydration manage to resolve and resume hydration prior to their corresponding out-of-order subtrees having been moved into place. This would cause tearing or duplicated DOM.
In order to move forward, we need an end-to-end demo that recreates this scenario so that we can find the best mechanism for deferring hydration that does not rely on streaming knowledge in Preact core.
Hi, thank you so much for this fantastic project!
Do you guys have any update about what @developit explained?
Any updates here?
Any updates here?
Almost end of 2023 and there is no updates on this? Latest NextJS and Gatsby apps really depend on this to be able to use Preact instead of React 18.2.0. 😭 😭
@AnderUstarroz you could help us test it https://github.com/preactjs/preact-render-to-string/pull/296 is the updated Pr and there's a linked Preact PR
@AnderUstarroz you could help us test it #296 is the updated Pr and there's a linked Preact PR
No problem @JoviDeCroock , just tell me which versions of preact and preact-render-to-string should I use to replace my current package.json dependencies:
"dependencies": {
"gatsby": "^5.12.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
...
@AnderUstarroz you could help us test it #296 is the updated Pr and there's a linked Preact PR
No problem @JoviDeCroock , just tell me which versions of
preactandpreact-render-to-stringshould I use to replace my current package.json dependencies:
As Jovi mentioned, there's two open PRs. You'd have to build preact & rts from source.
Any updates? It is still a problem for Gatsby 5+ users
Bummer that this isn't generally available yet. Looking forward
Superseded by https://github.com/preactjs/preact-render-to-string/pull/296 and released in 6.5.0