• 리액트
  • FE 라이브러리
  • 브라우저 자바스크립트 환경에서 렌더링할 수 있는 방법 제공 + 동시에 서버에서 렌더링할 수 있는 API도 제공
• 서버에서 렌더링할 수 있는 API?
  • 브라우저의 window 환경이 아닌 Node.js와 같은 서버 환경에서만 실행할 수 있음
  • react-dom/server.js
    • 리액트에서 SSR을 실행할 때 사용하는 API를 확인 가능
    • react-dom이 서버에서 렌더링하기 위한 다양한 메서드를 제공하고 있음
    • 2022.8월 기준 server.node.js에 있는 함수를 export하고 있음
    • 리액트 18이 릴리스되면서 react-dom/server에 renderToPipeableStream이 추가됐고, 나머지는 중단됨

📍 renderToString

TODO: 공식문서 이해하기

• 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수
• SSR을 구현하는 데 가장 기초적인 API

// renderToString을 활용해 리액트 컴포넌트를 HTML 문자열로 만들어낸 모습
import ReactDOMServer from "react-dom/server";

function ChildrenComponent({ fruits }: { fruits: Array<string> }) {
  useEffect(() => {
    console.log(fruits);
  }, [fruits]);

  function handleClick() {
    console.log("hello");
  }

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit} onClick={handleClick}>
          {fruit}
        </li>;
      ))}
    </ul>
  );
}

function SampleComponent() {
  return (
    <>
      <div>hello</div>
      <ChildrenComponent fruits={["apple", "banana", "peach"]} />
    </>
  );
}

const result = ReactDOMServer.renderToString(
  React.createElement("div", { id: "root" }, <SampleComponent />)
);

위 result는 다음과 같은 문자열을 반환함

<div id="root" data-reactroot="">
  <div>hello</div>
  <ul>
    <li>apple</li>
    <li>banana</li>
    <li>peach</li>
  </ul>
</div>

✏️ 장점

• SSR의 이점인 client에서 실행되지 않고 일단 먼저 완성된 HTML을 server에서 제공할 수 있으므로 초기 렌더링 성능 good
• 검색엔진이나 메타 정보도 미리 준비한 채로 제공할 수 있음

👀 눈 여겨볼 점

1. 훅과 이벤트 핸들러는 결과물에 포함되지 않았음

• 최초 HTML 페이지를 빠르게 그려주는 데 목적이 있는 함수일 뿐
• 즉, 클라이언트에서 실행되는 자바스크립트 코드를 포함시키거나 렌더링하는 역할까지 해주지는 않음
• 실제로 사용자가 인터랙션할 준비가 되기 위해서는 별도의 자바스크립트 코드를 모두 다운로드, 파싱, 실행하는 과정을 거쳐야 함

1. div#root에 존재하는 속성인 data-reactroot
   • hydrate 함수에서 루트를 식별하는 기준점이 됨

📍 renderToStaticMarkup

• renderToString과 매우 유사한 함수
  • 공통점: 두 함수 모두 리액트 컴포넌트를 기준으로 HTML 문자열을 만듬
  • 차이점: 루트 요소에 추가한 data-reactroot와 같은 리액트에서만 사용하는 추가적인 DOM 속성을 만들지 않는다는 점
    • 리액트에서만 사용하는 속성을 제거하면 결과물인 HTML의 크기를 아주 약간이라도 줄일 수 있다는 장점이 있음