首先，安装 react 和 react-dom
# Any package manager can be usedbun add react react-dom服务端 (SSR) 渲染 React 组件为 HTML 流
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!" />,
);
将其与 Bun.serve() 结合使用，我们可以得到一个简单的 SSR HTTP 服务器
Bun.serve({
async fetch() {
const stream = await renderToReadableStream(
<Component message="Hello from server!" />,
);
return new Response(stream, {
headers: { "Content-Type": "text/html" },
});
},
});
React 19 及更高版本包含一个 SSR 优化，它利用了 Bun 的 “直接” ReadableStream 实现。如果您遇到类似 export named 'renderToReadableStream' not found 的错误，请确保安装 react 和 react-dom 的 19 版本，或者从 react-dom/server.browser 而不是 react-dom/server 导入。有关更多信息，请参阅 facebook/react#28941。