#42RenderingMedium

Server-Side Rendering (mini renderToString)

Server-Side Rendering

실제로는 react-dom/server의 renderToString을 사용하지만, 여기서는 미니 버전을 직접 구현합니다. React 트리를 HTML 비슷한 문자열로 직렬화하세요.

시그니처

export function renderToString(node: ReactNode): string;

지원 범위

  • Intrinsic 엘리먼트 (div, span, h1 등): <tag>...</tag> 또는 className이 있으면 <tag class="...">...</tag>
  • 함수 컴포넌트: 호출 결과를 다시 직렬화
  • children: 문자열, 숫자, 배열, 중첩 엘리먼트 모두 지원
  • null / undefined / boolean: 빈 문자열로 처리

사용 예시

renderToString(<div className="box"><span>hi</span></div>)
// => '<div class="box"><span>hi</span></div>'

function Hello({ name }: { name: string }) {
  return <h1>Hello {name}</h1>;
}
renderToString(<Hello name="world" />)
// => '<h1>Hello world</h1>'

학습 포인트

  • React 엘리먼트의 내부 구조: type, props, props.children
  • 함수 컴포넌트는 단순히 함수 호출
  • SSR의 핵심 아이디어: 트리를 문자열로 직렬화하여 클라이언트로 전송
Sandpack 로드 중…