服务器端渲染 (SSR) React 组件

首先，安装 react 和 react-dom：

# 可以使用任何包管理器
bun add react react-dom

要在服务器端将 React 组件渲染为 HTML 流 (SSR)：

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 服务器：

tsx

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 的错误，请确保安装版本 19 的 react 和 react-dom，或者从 react-dom/server.browser 导入而不是 react-dom/server。有关更多信息，请参阅 facebook/react#28941。