React 컴포넌트 서버 사이드 렌더링 (SSR)

시작하려면 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="Hello from server!" />);

이를 Bun.serve() 와 결합하면 간단한 SSR HTTP 서버를 만들 수 있습니다.

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 이상 버전은 Bun 의 "direct" ReadableStream 구현을 활용하는 SSR 최적화 를 포함합니다. export named 'renderToReadableStream' not found 와 같은 오류가 발생하면 react & react-dom 의 버전 19 를 설치했는지 확인하거나 react-dom/server 대신 react-dom/server.browser 에서 import 하세요. 자세한 내용은 facebook/react#28941 을 참조하세요.