Skip to main content
首先，安装 react 和 react-dom：
terminal
# 可以使用任意包管理器
bun add react react-dom
要将 React 组件在服务器端渲染为 HTML 流（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="来自服务器的问候！" />);
将此与 Bun.serve() 结合，我们得到一个简单的 SSR HTTP 服务器：
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/typescript.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=a3dffd2241f05776d3bd25171d0c5a79server.ts
Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="来自服务器的问候！" />);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});
React 19 及以后版本包含一个利用 Bun “直接” ReadableStream 实现的 SSR 优化。如果遇到类似 export named 'renderToReadableStream' not found 的错误，请确保安装了 react 和 react-dom 的 19 版本，或者从 react-dom/server.browser 而非 react-dom/server 导入。更多信息请参见 facebook/react#28941。