Server-side render (SSR) di un componente React

Per iniziare, installa react e react-dom:

# È possibile usare qualsiasi package manager
bun add react react-dom

Per eseguire il render di un componente React in uno stream HTML lato server (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="Ciao dal server!" />);

Combinando questo con Bun.serve(), otteniamo un semplice server HTTP SSR:

tsx

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="Ciao dal server!" />);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

React 19 e versioni successive includono un'ottimizzazione SSR che sfrutta l'implementazione "direct" di ReadableStream di Bun. Se riscontri un errore come export named 'renderToReadableStream' not found, assicurati di installare la versione 19 di react e react-dom, oppure importa da react-dom/server.browser invece di react-dom/server. Consulta facebook/react#28941 per ulteriori informazioni.