DIL: 모던 리액트 딥 다이브, 4주차-7

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week4-7_2024-03-31

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 4주차 | 4, 8장 | SSR과 ESlint, 테스트 라이브러리 | 270p~.. |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 새벽 공부

---

서버 사이드 랜더링을 위한 리액트 API 알아보기

• 리액트 애플리케이션을 랜더링할 수 있는 API
  • Node.js와 같은 서버 환경에서만 실행할 수 있다
  • https://github.com/facebook/react/blob/main/packages/react-dom/server.node.js

1. renderToString

• 인수로 넘겨받은 리액트 컴포넌트를 랜더링해 HTML 문자열로 반환한다.
• 최초의 페이지를 HTML로 먼저 랜더링

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

2. renderToStaticMarkup

• renderToString과 유사한 함수
• 리액트 컴포넌트를 기준으로 HTML 문자열을 만든다
  • data-reactroot과 같은 리액트에서만 사용하는 추가적인 DOM 속성을 만들지 않는다.
  • HTML의 크기를 약간 줄일 수 있다
• 브라우저 API를 실행할 수 없고, hydrate을 수행하면 서버와 클라이언트의 내용이 맞지 않는 에러
  • hydrate을 수행하지 않는다는 가정하에 HTML을 반환 블로그 글, 상품 약관 정보 같은 아무런 액션이 없는 정적인 내용을 만들 때 사용

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

3. renderToNodeStream

• renderToString과 결과물이 동일
• Node.js에 의존하고 있어, 브라우저에서 사용하는 것이 불가능
  • Node.js의 ReadableStream
  • 브라우저에서도 사용 가능한 객체이지만, 만드는 과정이 불가능
• utf-8으로 인코딩된 바이트 스트림: Deno, Bun과 같은 서버 환경에서만 사용할 수 있다.
• 스트림이란?
  • 큰 데이터를 다룰 때, 데이터를 청크(chunk)로 분할해 조금씩 가져오는 방식을 의미
• 대부분의 리액트 서버 사이드 랜더링 프레임워크는 renderToNodeStream을 채택

4. renderToStaticNodeStream

• renderToNodeStrea과 결과물이 동일
  • 리액트 속성이 제공되지 않는, hydrate을 할 필요없는 순수 HTML 결과물.

5. hydrate

• HTML 콘텐츠에 이벤트와 핸들러를 붙인다
• render() 메서드
  • create-react-app으로 생성된 index.js에서 찾아볼 수 있다

  const rootElement = document.getElementById("root");
  React.render(<App />, rootElement);
  

• hydrate()

  const element = document.getElementById(containerId); // 서버에서 랜더링된 HTML의 특정 위치
  ReactDOM.hydrate(<App />, element);
  

  • 두 번째 인수에는 이미 renderToString 등으로 랜더링된 정적 HTML 정보가 담겨 있어야 한다.
  • 담겨있지 않다면 불일치 에러가 발생하고, hydrate가 랜더링한 기준으로 웹 페이지를 그리는 데, 사실상 서버와 클라이언트에서 두 번 랜더링을 하게 된다.
  • 불가피한 경우 (ms값 사용 등) suppressHydrationWarning을 추가해 경고를 끌 수 있다.