React コンポーネントをサーバーサイドレンダリング（SSR）

開始するには、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 以降には、Bun の「ダイレクト」ReadableStream 実装を活用する SSR 最適化が含まれています。export named 'renderToReadableStream' not found のようなエラーが発生した場合は、react と react-dom のバージョン 19 をインストールしていることを確認するか、react-dom/server の代わりに react-dom/server.browser からインポートしてください。詳細については facebook/react#28941 を参照してください。