伺服器端渲染（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 匯入。詳情請參閱 react/react#28941。