Eine React-Komponente serverseitig rendern (SSR)

Um zu beginnen, installieren Sie react & react-dom:

# Any package manager can be used
bun add react react-dom

Um eine React-Komponente serverseitig in einen HTML-Stream zu rendern (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!" />);

Kombiniert mit Bun.serve() erhalten wir einen einfachen SSR-HTTP-Server:

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 und später enthält eine SSR-Optimierung, die Buns "direkte" ReadableStream-Implementierung nutzt. Wenn Sie auf einen Fehler wie export named 'renderToReadableStream' not found stoßen, stellen Sie sicher, dass Sie Version 19 von react & react-dom installieren, oder importieren Sie stattdessen von react-dom/server.browser anstelle von react-dom/server. Siehe facebook/react#28941 für weitere Informationen.