Add Bun streaming server renderer

[colinhacks]

Summary

This PR adds a streaming React renderer that's optimized for Bun, and a conditional export in "react-dom" that is respected by the bun runtime.

How did you test this change?

The built versions of build/node_modules/react-dom/esm/react-dom-server.bun.{development|production}.js have been tested against Bun's React test suite: https://github.com/oven-sh/bun/blob/main/test/bun.js/react-dom.test.tsx. For the moment these files were manually copied over to the Bun repo, if/when this PR is merged we'll switch to an NPM dependency in our test suite.

$ bun wiptest react

react-dom.test.tsx:
✓ React > React.createContext works
✓ server.bun(<a>b</a>) > Response.text()
✓ server.bun(<a>b</a>) > Response.arrayBuffer()
✓ server.bun(<a>b</a>) > Response.blob()
✓ server.bun(<a>b</a>) > readableStreamToText(stream)
✓ server.bun(<a>b</a>) > readableStreamToBlob(stream)
✓ server.bun(<a>b</a>) > readableStreamToArray(stream)
✓ server.bun(<a>b</a>) > readableStreamToArrayBuffer(stream)
✓ server.bun(<a>b</a>) > for await (chunk of stream)
✓ server.bun(<a>b</a>) > for await (chunk of stream) (arrayBuffer)
... more tests
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > Response.arrayBuffer()
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > Response.blob()
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > readableStreamToText(stream)
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > readableStreamToBlob(stream)
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > readableStreamToArray(stream)
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > readableStreamToArrayBuffer(stream)
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > for await (chunk of stream)
✓ server.browser(<span>Hello World!</span>😋L😋l😋L😋) > for await (chunk of stream) (arrayBuffer)

 343 pass
 0 fail
 345 expect() calls
 Ran 343 tests across 1 files [2.13s]

[facebook-github-bot]

Hi @colinhacks!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[sizebot]

Comparing: f31005d...9ed1e91

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	154.36 kB	154.36 kB	=	48.99 kB	48.99 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	156.28 kB	156.28 kB	=	49.61 kB	49.61 kB
facebook-www/ReactDOM-prod.classic.js	=	533.22 kB	533.22 kB	=	94.44 kB	94.44 kB
facebook-www/ReactDOM-prod.modern.js	=	518.31 kB	518.31 kB	=	92.26 kB	92.26 kB
facebook-www/ReactDOMForked-prod.classic.js	=	533.22 kB	533.22 kB	=	94.44 kB	94.44 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	315.90 kB	+∞%	0.00 kB	72.49 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	55.08 kB	+∞%	0.00 kB	17.23 kB
oss-experimental/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	314.58 kB	+∞%	0.00 kB	72.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	54.67 kB	+∞%	0.00 kB	17.04 kB
oss-stable-semver/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	314.61 kB	+∞%	0.00 kB	72.14 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	54.69 kB	+∞%	0.00 kB	17.07 kB
oss-stable/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	315.90 kB	+∞%	0.00 kB	72.49 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	55.08 kB	+∞%	0.00 kB	17.23 kB
oss-experimental/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	314.58 kB	+∞%	0.00 kB	72.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	54.67 kB	+∞%	0.00 kB	17.04 kB
oss-stable-semver/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js	+∞%	0.00 kB	314.61 kB	+∞%	0.00 kB	72.14 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js	+∞%	0.00 kB	54.69 kB	+∞%	0.00 kB	17.07 kB
oss-stable/react-dom/server.bun.js	+∞%	0.00 kB	0.65 kB	+∞%	0.00 kB	0.26 kB

Generated by 🚫 dangerJS against 9ed1e91

[gnoff]

An exciting PR! I think the build options need to be considered some more. Also there are runtime specific tests for node/browser to ensure key apis work in every environment. Can you port those tests to a Bun specific implementation?

[eps1lon]

The built versions of build/node_modules/react-dom/esm/react-dom-server.bun.{development|production}.js have been tested against Bun's React test suite

FYI you can also test against built artifacts from this PR: https://react-builds.vercel.app/api/prs/25597/packages/react-dom

You can also test against a specific commit. https://react-builds.vercel.app/ explains this in more detail

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[colinhacks]

Thanks for the comments @gnoff! I've addressed your reviews and comments.

Regarding tests: I could port ReactDOMFizzServerBrowser-test.js to Bun, but the tests would fail unless executed with the Bun runtime, as they rely on a Bun-specific API in ReadableStream:

new ReadableStream({ type: 'direct' })

Since all tests are currently executed with node, this would fail for renderToReadableStream. I figured I should ask before including Bun in the CI environment, since that may not be appreciated, but I think it's doable. We'll have tests in Bun that will run against react-dom@next so we'd catch regressions. Let me know what you think is best 👍

[gnoff]

@colinhacks Ah, that's right, i forgot that our browser test is kinda cheating b/c it is running in a mock web standards environment with Jest. You're right it doesn't make sense to add the tests unless we can actually run it in the propert runtime. I'm going to look into this b/c we ought to do tests in all the runtimes really. If you're so included and want to hack on it as well to get something working for Bun too that would be cool. I'll follow up in a few days when I know if this is something I'm acutally going to prioritize right now-ish

[gnoff]

Thanks! the other changes look good. I left a few more comments and also see the CLA still needs to be completed for this to be mergable

[Jarred-Sumner]

also see the CLA still needs to be completed for this to be mergable

@gnoff What's the next step for the CLA? I signed it yesterday + added me & @colinhacks under "Schedule A"

[Jarred-Sumner]

Performance numbers

For a "hello world" component served over http on an M1 in Bun v0.2.2

HTTP req/s	ReactDOM renderer
102,321	react-dom/server.bun
29,232	react-dom/server.browser

Overall, this makes SSR'ing React sent over HTTP/HTTPS in Bun up to 3.5x faster, without changing the public API interface.

When using new Response(stream).arrayBuffer() or new Response(stream).text() its closer to 2x (we invested more time optimizing it for HTTP/HTTPS than buffered versions).

There's nothing React-specific about the optimizations in this PR. The performance win comes from Bun's "direct" ReadableStream implementation, which means other frameworks/rendering libraries will get similar performance benefits in Bun for using the type: "direct" ReadableStream.

react-dom/server.bun

❯ oha http://localhost:3001 -z 5s -c 20
Summary:
  Success rate:	1.0000
  Total:	5.0012 secs
  Slowest:	0.0077 secs
  Fastest:	0.0000 secs
  Average:	0.0002 secs
  Requests/sec:	102321.1759

  Total data:	42.46 MiB
  Size/request:	87 B
  Size/sec:	8.49 MiB

Response time histogram:
  0.000 [10001]  |■
  0.000 [40811]  |■■■■■■■
  0.000 [175510] |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  0.000 [178298] |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  0.000 [77296]  |■■■■■■■■■■■■■
  0.000 [19933]  |■■■
  0.000 [5344]   |
  0.000 [1478]   |
  0.000 [402]    |
  0.001 [113]    |
  0.001 [2542]   |

Latency distribution:
  10% in 0.0001 secs
  25% in 0.0002 secs
  50% in 0.0002 secs
  75% in 0.0002 secs
  90% in 0.0003 secs
  95% in 0.0003 secs
  99% in 0.0004 secs

Details (average, fastest, slowest):
  DNS+dialup:	0.0012 secs, 0.0007 secs, 0.0016 secs
  DNS-lookup:	0.0001 secs, 0.0000 secs, 0.0002 secs

Status code distribution:
  [200] 511728 responses

react-dom/server.browser

❯ oha http://localhost:3001 -z 5s -c 20
Summary:
  Success rate:	1.0000
  Total:	5.0009 secs
  Slowest:	0.0079 secs
  Fastest:	0.0001 secs
  Average:	0.0007 secs
  Requests/sec:	29232.7949

  Total data:	12.13 MiB
  Size/request:	87 B
  Size/sec:	2.43 MiB

Response time histogram:
  0.000 [38]    |
  0.000 [23187] |■■■■■■■■■■■■
  0.001 [40043] |■■■■■■■■■■■■■■■■■■■■■
  0.001 [59202] |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  0.001 [14094] |■■■■■■■
  0.001 [1711]  |
  0.001 [1762]  |
  0.002 [3407]  |■
  0.002 [1941]  |■
  0.002 [395]   |
  0.002 [410]   |

Latency distribution:
  10% in 0.0004 secs
  25% in 0.0005 secs
  50% in 0.0007 secs
  75% in 0.0008 secs
  90% in 0.0009 secs
  95% in 0.0012 secs
  99% in 0.0016 secs

Details (average, fastest, slowest):
  DNS+dialup:	0.0007 secs, 0.0006 secs, 0.0008 secs
  DNS-lookup:	0.0000 secs, 0.0000 secs, 0.0001 secs

Status code distribution:
  [200] 146190 responses

Source code (run with bun --jsx-production ./react-hello-world.jsx):

import { renderToReadableStream } from "../../test/bun.js/react-dom-server.bun";
const headers = {
  headers: {
    "Content-Type": "text/html",
  },
};

const App = () => (
  <html>
    <body>
      <h1>Hello World</h1>
      <p>This is an example.</p>
    </body>
  </html>
);

const port = Number(process.env.PORT || 3001);
Bun.serve({
  port,
  async fetch(req) {
    return new Response(await renderToReadableStream(<App />), headers);
  },
});

[gnoff]

I think this is good now. I had one more nit re: package.json

@sebmarkbage I haven't made progress on changing our testing strategy meaningfully for server runtimes so no imminent solution to actually running these tests in CI in a Bun runtime. Is solving the testing issue a blocker to merging this in your mind?

[sebmarkbage]

We can probably land without tests for now.

[colinhacks]

Thanks @gnoff for your help with this! Just addressed that final review, I think this is good to go 👍