Серверный рендеринг (SSR) React компонента

Для начала установите react и react-dom:

# Можно использовать любой менеджер пакетов
bun add react react-dom

Чтобы выполнить рендеринг React компонента в HTML поток на сервере (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="Привет от сервера!" />);

Объединив это с Bun.serve(), мы получаем простой SSR HTTP сервер:

tsx

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="Привет от сервера!" />);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

React 19 и более поздние версии включают SSR оптимизацию, которая использует преимущества реализации ReadableStream Bun. Если вы столкнулись с ошибкой вроде export named 'renderToReadableStream' not found, убедитесь, что установлена версия 19 пакетов react и react-dom, или импортируйте из react-dom/server.browser вместо react-dom/server. Смотрите facebook/react#28941 для получения дополнительной информации.