Server-side render (SSR) a React component

To get started, install react & react-dom:

terminal

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

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

ssr-react.tsx

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!" />);

Combining this with Bun.serve(), we get an SSR HTTP server:

server.tsx

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 includes an SSR optimization that takes advantage of Bun’s “direct” ReadableStream implementation. If you run into an error like export named 'renderToReadableStream' not found, please make sure to install version 19 of react & react-dom, or import from react-dom/server.browser instead of react-dom/server. See facebook/react#28941 for more information.

Overview

Deployment

Runtime & Debugging

Utilities

Ecosystem & Frameworks

HTTP & Networking

WebSocket

Processes & System

Package Manager

Test Runner

Runtime & Debugging

Module System

File System

Utilities

HTML Processing

Binary Data

Streams

Server-side render (SSR) a React component