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="Hello from server!" />);
结合 Bun.serve()，我们得到一个简单的 SSR HTTP 服务器：
https://mintcdn.com/teemo/2s-4Z6VdGqiCeBNX/icons/typescript.svg?fit=max&auto=format&n=2s-4Z6VdGqiCeBNX&q=85&s=087b260066909db1cd3e9c7292bc34b2server.ts
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。