开始之前，请安装 react 和 react-dom
# Any package manager can be usedbun add react react-dom要在服务器端将 React 组件渲染为 HTML 流 (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!" />,
);
将此与 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。