> ## Documentation Index
> Fetch the complete documentation index at: https://bun.ll1025.cn/llms.txt
> Use this file to discover all available pages before exploring further.
# 服务端渲染（SSR）React 组件
安装 `react` 和 `react-dom`：
```sh terminal icon="terminal" theme={null}
# 可以使用任何包管理器
bun add react react-dom
```
***
要在服务器端（SSR）将 React 组件渲染为 HTML 流：
```tsx ssr-react.tsx icon="file-code" theme={null}
import { renderToReadableStream } from "react-dom/server";
function Component(props: { message: string }) {
return (
{props.message}
);
}
const stream = await renderToReadableStream();
```
***
将其与 `Bun.serve()` 结合以创建一个 SSR HTTP 服务器：
```tsx server.tsx icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
Bun.serve({
async fetch() {
const stream = await renderToReadableStream();
return new Response(stream, {
headers: { "Content-Type": "text/html" },
});
},
});
```
***
React `19` 及更高版本包含一个 [SSR 优化](https://github.com/facebook/react/pull/25597)，利用了 Bun 的"直接" `ReadableStream` 实现。如果你遇到类似 `export named 'renderToReadableStream' not found` 的错误，请安装 `react` 和 `react-dom` 的 `19` 版本，或者从 `react-dom/server.browser` 而非 `react-dom/server` 导入。详情请参见 [facebook/react#28941](https://github.com/facebook/react/issues/28941)。