Renderizado del lado del servidor (SSR) de un componente React

Para comenzar, instala react y react-dom:

# Se puede usar cualquier gestor de paquetes
bun add react react-dom

Para renderizar un componente React a un flujo HTML del lado del servidor (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="¡Hola desde el servidor!" />);

Combinando esto con Bun.serve(), obtenemos un servidor HTTP SSR simple:

tsx

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

React 19 y versiones posteriores incluyen una optimización de SSR que aprovecha la implementación "directa" de ReadableStream de Bun. Si encuentras un error como export named 'renderToReadableStream' not found, asegúrate de instalar la versión 19 de react y react-dom, o importa desde react-dom/server.browser en lugar de react-dom/server. Consulta facebook/react#28941 para más información.