react/packages/react-dom
Sebastian Markbåge 93f1668045
[Fizz] Add Node Web Streams bundle for SSR (#33441)
We highly recommend using Node Streams in Node.js because it's much
faster and it is less likely to cause issues when chained in things like
compression algorithms that need explicit flushing which the Web Streams
ecosystem doesn't have a good solution for. However, that said, people
want to be able to use the worse option for various reasons.

The `.edge` builds aren't technically intended for Node.js. A Node.js
environments needs to be patched in various ways to support it. It's
also less optimal since it can't use [Node.js exclusive
features](https://github.com/facebook/react/pull/33388) and have to use
[the lowest common
denominator](https://github.com/facebook/react/pull/27399) such as JS
implementations instead of native.

This adds a Web Streams build of Fizz but exclusively for Node.js so
that in it we can rely on Node.js modules. The main difference compared
to Edge is that SSR now uses `createHash` from the `"crypto"` module and
imports `TextEncoder` from `"util"`. We use `setImmediate` instead of
`setTimeout`.

The public API is just `react-dom/server` which in Node.js automatically
imports `react-dom/server.node` which re-exports the legacy bundle, Node
Streams bundle and Node Web Streams bundle. The main downside is if your
bundler isn't smart to DCE this barrel file.

With Flight the difference is larger but that's a bigger lift.
2025-06-05 10:50:41 -04:00
..
npm [Fizz] Add Node Web Streams bundle for SSR (#33441) 2025-06-05 10:50:41 -04:00
src [Fizz] Add Node Web Streams bundle for SSR (#33441) 2025-06-05 10:50:41 -04:00
client.js [react-dom] move all client code to react-dom/client (#28271) 2024-04-24 08:50:32 -07:00
index.js [react-dom] move all client code to react-dom/client (#28271) 2024-04-24 08:50:32 -07:00
package.json Bump next prerelease version numbers (#32782) 2025-03-28 16:20:04 -04:00
profiling.js [react-dom] move all client code to react-dom/client (#28271) 2024-04-24 08:50:32 -07:00
README.md chore: update new docs links for react-dom (#26456) 2023-03-22 12:55:06 +01:00
server.browser.js Remove renderToStaticNodeStream (#28873) 2024-04-18 21:06:04 -07:00
server.bun.js Remove renderToStaticNodeStream (#28873) 2024-04-18 21:06:04 -07:00
server.edge.js Remove renderToStaticNodeStream (#28873) 2024-04-18 21:06:04 -07:00
server.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
server.node.js [Fizz] Add Node Web Streams bundle for SSR (#33441) 2025-06-05 10:50:41 -04:00
static.browser.js [Fizz] Add resumeAndPrerender to Static Rendering (#30950) 2024-09-12 10:51:01 -04:00
static.edge.js [Fizz] Add resumeAndPrerender to Static Rendering (#30950) 2024-09-12 10:51:01 -04:00
static.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
static.node.js [Fizz] Add Node Web Streams bundle for SSR (#33441) 2025-06-05 10:50:41 -04:00
test-utils.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
unstable_server-external-runtime.js [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings (#25617) 2022-11-03 11:15:29 -04:00
unstable_testing.experimental.js [react-dom] move all client code to react-dom/client (#28271) 2024-04-24 08:50:32 -07:00
unstable_testing.js [react-dom] move all client code to react-dom/client (#28271) 2024-04-24 08:50:32 -07:00

react-dom

This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.

Installation

npm install react react-dom

Usage

In the browser

import { createRoot } from 'react-dom/client';

function App() {
  return <div>Hello World</div>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

On the server

import { renderToPipeableStream } from 'react-dom/server';

function App() {
  return <div>Hello World</div>;
}

function handleRequest(res) {
  // ... in your server handler ...
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    // ...
  });
}

API

react-dom

See https://react.dev/reference/react-dom

react-dom/client

See https://react.dev/reference/react-dom/client

react-dom/server

See https://react.dev/reference/react-dom/server