renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Reference참조
  • renderToStaticMarkup(reactNode, options?)
• Usage사용법
  • Rendering a non-interactive React tree as HTML to a string비대화형 React 트리를 HTML 문자열로 렌더링하기

Reference참조

renderToStaticMarkup(reactNode, options?)

On the server, call renderToStaticMarkup to render your app to HTML. 서버에서 renderToStaticMarkup을 호출하여 앱을 HTML로 렌더링합니다.

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

const html = renderToStaticMarkup(<Page />);

It will produce non-interactive HTML output of your React components. 이는 React 컴포넌트에 대한 비대화형 HTML 출력물을 생성합니다.

See more examples below. 아래에서 더 많은 예시를 확인하세요.

Parameters매개변수

• reactNode: A React node you want to render to HTML. For example, a JSX node like <Page />. reactNode: HTML로 렌더링하려는 React 노드입니다. 예: <Page />와 같은 JSX 노드

• optional options: An object for server render.

  • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

Returns반환값

An HTML string. HTML 문자열

Caveats주의사항

• renderToStaticMarkup output cannot be hydrated. renderToStaticMarkup 의 출력은 hydrate될 수 없습니다.

• renderToStaticMarkup has limited Suspense support. If a component suspends, renderToStaticMarkup immediately sends its fallback as HTML. renderToStaticMarkup 는 Suspense를 제한적으로 지원합니다. 컴포넌트가 일시 중단되면 renderToStaticMarkup는 즉시 폴백을 HTML로 전송합니다.

• renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, get the HTML by rendering it into a DOM node. renderToStaticMarkup는 브라우저에서 작동은 하지만 클라이언트 코드에서 사용하는 것은 권장하지 않습니다. 브라우저에서 컴포넌트를 HTML로 렌더링해야 하는 경우 DOM 노드 안에 렌더링함으로써 HTML을 가져오세요.

Usage사용법

Rendering a non-interactive React tree as HTML to a string비대화형 React 트리를 HTML 문자열로 렌더링하기

Call renderToStaticMarkup to render your app to an HTML string which you can send with your server response: 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);
});

This will produce the initial non-interactive HTML output of your React components. 이렇게 하면 React 컴포넌트의 초기 비대화형 HTML 출력이 생성됩니다.