renderToStaticMarkup은 비대화형 React 트리를 HTML 문자열로 렌더링함.

const html = renderToStaticMarkup(reactNode)

---

Reference

renderToStaticMarkup(reactNode)

서버에서 renderToStaticMarkup을 호출하여 앱을 HTML로 렌더링할 수 있음.

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

const html = renderToStaticMarkup(<Page />);

이는 React 컴포넌트의 비대화형 HTML 출력을 생성함.

Parameters

• reactNode: HTML로 렌더링하려는 React 노드. 예를 들어, <Page />와 같은 JSX 노드.
• options (optional): 서버 렌더링을 위한 객체.
  • identifierPrefix (optional): React가 useId에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러 루트를 사용할 때 충돌을 피하는 데 유용함.

Returns

HTML 문자열을 반환함.

Caveats

• renderToStaticMarkup은 hydrate될 수 없음.

• renderToStaticMarkup은 Suspense를 제한적으로 지원함. 컴포넌트가 일시 중단되면 renderToStaticMarkup은 즉시 폴백을 HTML로 보냄.

• renderToStaticMarkup은 브라우저에서 작동하지만, 클라이언트 코드에서 사용하는 것은 권장하지 않음. 브라우저에서 컴포넌트를 HTML로 렌더링해야 하는 경우, DOM 노드로 렌더링하여 HTML을 가져올 것.

---

Usage

Rendering a non-interactive React tree as HTML to a string

renderToStaticMarkup을 호출하여 앱을 서버 응답과 함께 보낼 수 있는 HTML 문자열로 렌더링할 수 있음:

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

이렇게 하면 React 컴포넌트의 초기 비대화형 HTML 출력이 생성됨.

Pitfall

이 메서드는 hydrate될 수 없는 비대화형 HTML을 렌더링함. 이 메서드는 React를 간단한 정적 페이지 생성기로 사용하거나 이메일과 같이 완전히 정적인 콘텐츠를 렌더링할 때 유용함.

인터랙티브 앱은 서버에서 renderToString을 사용하고 클라이언트에서 hydrateRoot를 사용해야 함.