Server-side render (SSR) a React component | Bun 简体中文

Install react and react-dom:

# Any package manager can be used
bun add react react-dom

To render a React component to an HTML stream server-side (SSR):

import { renderToReadableStream } from "react-dom/server";

function Component(props: { message: string }) {
  return (
    <body>
      <h1>{props.message}</h1>
    </body>
  );
}

const stream = await renderToReadableStream(<Component message="Hello from server!" />);

Combine this with Bun.serve() to get an SSR HTTP server:

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="Hello from server!" />);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

React 19 and later include an SSR optimization that takes advantage of Bun's "direct" ReadableStream implementation. If you run into an error like export named 'renderToReadableStream' not found, install version 19 of react and react-dom, or import from react-dom/server.browser instead of react-dom/server. See react/react#28941 for details.