要在 HTML 串流伺服器端 (SSR) 渲染 React 元件
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 18.3 及後續版本包含 SSR 最佳化，可利用 Bun 的「直接」ReadableStream 實作。