開始之前，請安裝 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 之類的錯誤，請確保安裝了 react 和 react-dom 的 19 版本，或者從 react-dom/server.browser 而不是 react-dom/server 匯入。有關更多資訊，請參閱 facebook/react#28941。