首先，安裝 react & react-dom
# Any package manager can be usedbun add react react-dom將 React 組件渲染成伺服器端 HTML 流 (SSR)
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 伺服器
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 以取得更多資訊。