Renderizar no servidor (SSR) um componente React

Para começar, instale react e react-dom:

# Qualquer gerenciador de pacotes pode ser usado
bun add react react-dom

Para renderizar um componente React em um stream HTML no 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="Hello from server!" />);

Combinando isso com Bun.serve(), obtemos um servidor HTTP SSR simples:

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 e versões posteriores incluem uma otimização de SSR que aproveita a implementação "direct" do ReadableStream do Bun. Se você encontrar um erro como export named 'renderToReadableStream' not found, certifique-se de instalar a versão 19 de react e react-dom, ou importe de react-dom/server.browser em vez de react-dom/server. Consulte facebook/react#28941 para mais informações.