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/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/typescript.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=e7767043c9e885c34f2d6c8fe2a95217server.tsx
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。