Portfolio

서버에서 renderToStaticMarkup을 호출하면 non-interactive React 트리를 HTML 문자열로 렌더링합니다.

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를 제한적으로 지원합니다. 컴포넌트가 일시 중단되면 renderToStaticMarkup는 즉시 폴백을 HTML로 전송합니다.

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

사용법

비대화형 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 출력이 생성됩니다.

Pitfall | 함정

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

인터랙티브 앱은 서버에서는 renderToString을, 클라이언트에서는 hydrateRoot를 사용해야 합니다.