React
서버 측 렌더링 소개

렌더링 구성 요소

서버에서 구성 요소를 렌더링하는 두 가지 옵션 ( renderToString 및 renderToStaticMarkup 있습니다.

renderToString

그러면 React 구성 요소가 서버의 HTML로 렌더링됩니다. 이 함수는 HTML 요소에 data-react- 도 추가하여 클라이언트의 React가 요소를 다시 렌더링 할 필요가 없습니다.

import { renderToString } from "react-dom/server";
renderToString(<App />);

renderToStaticMarkup

이렇게하면 React 구성 요소가 HTML로 렌더링되지만 data-react- 속성이 없으면 구성 요소가 다시 렌더링되기 때문에 클라이언트에 렌더링 될 구성 요소를 사용하지 않는 것이 좋습니다.

import { renderToStaticMarkup } from "react-dom/server";
renderToStaticMarkup(<App />);