[react-dom/server 번역] renderToStaticMarkup

출처: https://react.dev/reference/react-dom/server/renderToStaticMarkup

Reference

`renderToStaticMarkup(reactNode, options?)`

서버에서 renderToStaticMarkup을 호출하면 앱을 HTML로 렌더링할 수 있습니다.

import { renderToStaticMarkup } from 'react-dom/server';

const html = renderToStaticMarkup(<Page />);

이 함수는 React 컴포넌트의 비인터랙티브(non-interactive) HTML 출력을 생성합니다.

Parameters

reactNode: HTML로 렌더링할 React 노드(예: <Page />와 같은 JSX 노드)
optional options: 서버 렌더 옵션 객체
- optional identifierPrefix: useId로 생성되는 id에 사용할 prefix 문자열. 여러 React root를 한 페이지에 사용할 때 id 충돌 방지에 유용합니다.

Returns

HTML 문자열을 반환합니다.

Caveats(주의사항)

renderToStaticMarkup의 출력은 hydration이 불가능합니다.
Suspense 지원이 제한적입니다. 컴포넌트가 suspend되면 즉시 fallback을 HTML로 렌더링합니다.
브라우저(클라이언트)에서도 동작하지만, 클라이언트 코드에서 사용하는 것은 권장하지 않습니다. 브라우저에서 컴포넌트를 HTML로 렌더링하려면 DOM 노드에 직접 렌더링 후 innerHTML을 얻으세요.

사용법

비인터랙티브 React 트리를 HTML 문자열로 렌더링하기

renderToStaticMarkup을 호출하면 앱을 HTML 문자열로 렌더링할 수 있으며, 서버 응답으로 전송할 수 있습니다.

import { renderToStaticMarkup } from 'react-dom/server';

// 라우트 핸들러 문법은 백엔드 프레임워크에 따라 다릅니다.
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});