Streaming renderer #259

marvinhagemeister · 2022-10-29T09:18:44Z

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.

changeset-bot · 2022-10-29T09:18:47Z

⚠️ No Changeset found

Latest commit: 27dbdce

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

feat: use custom element for hydration feat: add onError to renderToChunks feat: add renderToPipeableStream

This reduces code and *should* also be more performant than recursive JS iteration. See: https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

feat: use comments instead of element as marker

jacob-ebey · 2022-11-09T00:57:24Z

src/index.js

+			if (renderer !== undefined && error.then) {
+				/** @type {import('./internal').Component} */
+				let component;
+				let susVNode = vnode;


Much sus, very amogus 😂

Lucasvo1 · 2023-01-17T09:59:30Z

Any updates on this?

It's a blocker for using Preact with Nextjs.

osdiab · 2023-01-18T15:34:03Z

Also a blocker for Remix, too.

graysonhicks · 2023-01-25T18:30:35Z

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

… on #241 (#267) * use index.module.js when benchmarking, since its the output of `npm run transpile` * fix bench:v8 output path * update microbundle and turn off function inlining * fix JSX entrypoint and tests * fix type defintion to reflect removed exports and options * fix root copy of jsx types * optimize renderToString performance using switch and short-circuiting * Create bright-ligers-jam.md * Update bright-ligers-jam.md * Update bright-ligers-jam.md * Backport changes from #237 (child/parent properties, simplified Fragment handling) * ci: update github actions (#266) * ci: update actions/checkout to v3 * ci: update actions/cache to v3 * merge master * lockfile version * update benchmarking reference implmementation to 5.2.6 (6a0bec2) * fix tests * fix before diff hook being called on invalid vnodes * move non-exported files into a lib directory * update pretty implementation and move typedefs into a d.ts * Move chunked implementation out of the default entrypoint * update tests to reflect chunking being moved out of default entrypoint * fix d8 bench script --------- Co-authored-by: Abdul Rauf <abdulraufmujahid@gmail.com>

juliannehalversen · 2023-02-03T18:55:08Z

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

developit · 2023-02-03T23:08:11Z

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.

seo-burkedecor · 2023-03-08T12:23:40Z

Hi, thank you so much for this fantastic project!

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

AnderUstarroz · 2023-12-01T10:13:09Z

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. 😭 😭

JoviDeCroock · 2023-12-01T10:24:51Z

@AnderUstarroz you could help us test it #296 is the updated Pr and there's a linked Preact PR

AnderUstarroz · 2023-12-09T07:06:06Z

@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",

      ...

rschristian · 2023-12-09T07:08:46Z

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

PavelAstapov · 2024-03-12T13:42:32Z

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

Inviz · 2024-04-16T18:47:33Z

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

JoviDeCroock · 2024-05-22T06:53:03Z

Superseded by #296 and released in 6.5.0

marvinhagemeister added 6 commits October 15, 2022 21:45

Disable eslint lines-around-comment rule

5799b58

Update test scripts to allow watch usage

8b104e2

Add streaming renderer

20d189b

Switch to element nodes as markers instead

c2ae535

Switch away from global ids

bee9748

Remove subtree option

3e6afe2

jacob-ebey added 5 commits October 31, 2022 14:51

feat: use comments instead of element as marker

a84fca4

feat: use custom element for hydration feat: add onError to renderToChunks feat: add renderToPipeableStream

chore: use NodeIterator to locate comments

d61cda8

This reduces code and *should* also be more performant than recursive JS iteration. See: https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

chore: remove redundancy and minify code

bca7c53

more minification

31f1839

even more minification

3ad1d62

developit mentioned this pull request Nov 8, 2022

[Feature] Preact Support remix-run/remix#425

Closed

3 tasks

marvinhagemeister added 5 commits November 8, 2022 17:13

Merge pull request #260 from jacob-ebey/comments-ce-script

95c42d3

feat: use comments instead of element as marker

Merge branch 'master' into streaming-render

5b06b07

Move files to new test dir structure

7b4fefa

Fix linting error

6771eda

Merge branch 'master' into streaming-render

14cf8ce

jacob-ebey reviewed Nov 9, 2022

View reviewed changes

lfre mentioned this pull request Nov 11, 2022

using-preact example / preact 18 compat in general does not work with next 13 vercel/next.js#42530

Open

1 task

maxproske mentioned this pull request Nov 11, 2022

Upgrade version to 18.2.0 for Next.js 13 preactjs/compat-alias-package#10

Closed

developit added 2 commits November 13, 2022 12:19

fix ts types

02ac131

fix Web Streams tests on Node <18

1e7d3c1

developit mentioned this pull request Nov 13, 2022

Streaming renderer: factor chunking out of main entrypoint and rebase on #241 #267

Merged

graysonhicks mentioned this pull request Jan 25, 2023

Build failed after using react v18+ and gatsby-plugin-preact gatsbyjs/gatsby#35500

Closed

2 tasks

developit and others added 2 commits February 2, 2023 10:57

Merge branch 'master' into streaming-render

34966cd

developit marked this pull request as ready for review February 3, 2023 02:56

fix d8 bench path

27dbdce

JoviDeCroock mentioned this pull request Mar 8, 2023

create demo for streaming render #280

Closed

This comment was marked as off-topic.

Sign in to view

tlgimenes mentioned this pull request Oct 9, 2023

Stream Rendering Roadmap #319

Closed

JoviDeCroock closed this May 22, 2024

JoviDeCroock deleted the streaming-render branch May 22, 2024 06:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Streaming renderer #259

Streaming renderer #259

marvinhagemeister commented Oct 29, 2022

changeset-bot bot commented Oct 29, 2022 •

edited

jacob-ebey Nov 9, 2022

Lucasvo1 commented Jan 17, 2023

osdiab commented Jan 18, 2023

graysonhicks commented Jan 25, 2023

juliannehalversen commented Feb 3, 2023

developit commented Feb 3, 2023 •

edited

seo-burkedecor commented Mar 8, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

AnderUstarroz commented Dec 1, 2023

JoviDeCroock commented Dec 1, 2023

AnderUstarroz commented Dec 9, 2023

rschristian commented Dec 9, 2023

PavelAstapov commented Mar 12, 2024

Inviz commented Apr 16, 2024

JoviDeCroock commented May 22, 2024

Streaming renderer #259

Streaming renderer #259

Conversation

marvinhagemeister commented Oct 29, 2022

changeset-bot bot commented Oct 29, 2022 • edited

⚠️ No Changeset found

jacob-ebey Nov 9, 2022

Choose a reason for hiding this comment

Lucasvo1 commented Jan 17, 2023

osdiab commented Jan 18, 2023

graysonhicks commented Jan 25, 2023

juliannehalversen commented Feb 3, 2023

developit commented Feb 3, 2023 • edited

seo-burkedecor commented Mar 8, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

AnderUstarroz commented Dec 1, 2023

JoviDeCroock commented Dec 1, 2023

AnderUstarroz commented Dec 9, 2023

rschristian commented Dec 9, 2023

PavelAstapov commented Mar 12, 2024

Inviz commented Apr 16, 2024

JoviDeCroock commented May 22, 2024

changeset-bot bot commented Oct 29, 2022 •

edited

developit commented Feb 3, 2023 •

edited