renderToStaticMarkup

const html = renderToStaticMarkup(reactNode)

• 참조
  • renderToStaticMarkup(reactNode)
• 사용법
  • 상호작용하지 않는 React 트리를 HTML 문자열로 렌더링하기

참조

renderToStaticMarkup(reactNode)

서버에서 renderToStaticMarkup을 호출하여 앱을 HTML로 렌더링합니다.

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

const html = renderToStaticMarkup(<Page />);

상호작용하지 않는 React 컴포넌트의 HTML 출력을 생성합니다.

아래 예시를 참고하세요.

파라미터

• reactNode: HTML로 렌더링할 React 노드입니다. 예를 들어, <Page />와 같은 JSX 노드입니다.

반환

HTML 문자열을 반환합니다.

주의 사항

• renderToStaticMarkup의 출력값은 hydrate 될 수 없습니다.

• renderToStaticMarkup은 Suspense를 제한적으로 지원합니다. 만약 suspense 컴포넌트라면, renderToStaticMarkup은 즉시 HTML을 fallback으로 보냅니다.

• renderToStaticMarkup은 브라우저에서 동작하지만, 클라이언트 코드에서 사용되는 건 권장하지 않습니다. 브라우저에서 컴포넌트를 HTML로 렌더링해야 하는 경우, HTML 을 DOM 노드로 렌더링해서 가져오세요.

사용법

상호작용하지 않는 React 트리를 HTML 문자열로 렌더링하기

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 결과가 생성됩니다.