preact-render-to-string icon indicating copy to clipboard operation
preact-render-to-string copied to clipboard

Streaming renderer

Open marvinhagemeister opened this issue 3 years ago • 14 comments

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.

marvinhagemeister avatar Oct 29 '22 09:10 marvinhagemeister

⚠️ 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

changeset-bot[bot] avatar Oct 29 '22 09:10 changeset-bot[bot]

Any updates on this?

It's a blocker for using Preact with Nextjs.

lvanoverberghe avatar Jan 17 '23 09:01 lvanoverberghe

Also a blocker for Remix, too.

osdiab avatar Jan 18 '23 15:01 osdiab

👋 This is also a blocker for gatsby-plugin-preact users trying to upgrade to Gatsby v5, which requires React 18.

graysonhicks avatar Jan 25 '23 18:01 graysonhicks

Any updates here? As stated above this is a big issue for users trying to upgrade to Gatsby v5.

juliannehalversen avatar Feb 03 '23 18:02 juliannehalversen

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.

developit avatar Feb 03 '23 23:02 developit

Hi, thank you so much for this fantastic project!

Do you guys have any update about what @developit explained?

seo-burkedecor avatar Mar 08 '23 12:03 seo-burkedecor

Any updates here?

FleetAdmiralJakob avatar May 16 '23 14:05 FleetAdmiralJakob

Any updates here?

xand3r40r93 avatar Sep 02 '23 08:09 xand3r40r93

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 avatar Dec 01 '23 10:12 AnderUstarroz

@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

JoviDeCroock avatar Dec 01 '23 10:12 JoviDeCroock

@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 avatar Dec 09 '23 07:12 AnderUstarroz

@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:

As Jovi mentioned, there's two open PRs. You'd have to build preact & rts from source.

rschristian avatar Dec 09 '23 07:12 rschristian

Any updates? It is still a problem for Gatsby 5+ users

PavelAstapov avatar Mar 12 '24 13:03 PavelAstapov

Bummer that this isn't generally available yet. Looking forward

Inviz avatar Apr 16 '24 18:04 Inviz

Superseded by https://github.com/preactjs/preact-render-to-string/pull/296 and released in 6.5.0

JoviDeCroock avatar May 22 '24 06:05 JoviDeCroock