服务器端渲染（SSR）React 组件

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

server.tsx

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="来自服务器的问候！" />);
    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。

概述

部署

运行时与调试

实用工具

生态系统与框架

HTTP 与网络

WebSocket

进程与系统

包管理器

测试运行器

运行时与调试

模块系统

文件系统

实用工具

HTML 处理

二进制数据

Streams

服务器端渲染（SSR）React 组件