1. 개념

공식문서를 정독한다.

블로그를 찾아 읽으며 다양한 방식, 몰랐던 사실에 대해 파악한다.

1. 기존 renderToString의 문제점

Node.js는 기본적으로 싱글 스레드 언어이다. 한 번에 하나의 작업을 처리하지 못하기에, setTimeout이나 Promise같이 비동기 처리는 콜백 함수 형태로 이벤트 루프에 넘겨져 비동기로 처리하도록 했다. 기본적으로 이벤트 루프는 6개의 Phase(Macrotask Queue)와 2개의 Microtask Queue를 가지고 있다.

React18이전에 제공하던 서버 API에는 renderToString가 있다. 이 API는 공식 문서에서도 볼 수 있듯이 스트리밍이나 데이터 대기를 지원하지 않으며 이를 위해서는 Node.js의 경우 renderToPipeableStream을 추천한다.

Untitled

renderToString는 reactNode를 넘기면 HTML로 렌더링하여 반환하는 함수이다.

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

const html = renderToString(<App />);

또한, 브라우저에서 이 html을 전달받고 hydrateRoot를 호출하면 서버에서 생성된 HTML에 사용자가 상호작용할 수 있도록 만든다.

const root = hydrateRoot(domNode, reactNode, options?)

renderToString는 동기 함수이기 때문에 메인 스레드에서 처리된다. 콜스택 내에서 실행될 때 많은 시간을 소모할 가능성이 높기 때문에 동시에 많은 요청이 몰리면 메인 스레드는 블락되게 될 수 있다.

2. React 18에서 renderToPipeableStream를 통한 해결책

React의 동시성 기능을 본격적으로 반영한 18버전부터 이에 대해 Streaming SSR과 선택적 Hydration이라는 두 가지 해결책을 내놓는다.

공식 문서 : New Suspense SSR Architecture in React 18

요약

  1. React 18은 React SSR의 성능을 구조적으로 향상한다.

  2. 주요 새로운 API는 renderToPipeableStream이다.

    공식 문서 : Upgrading to React 18 on the server

    요약

    1. renderToString(React.Node): string는 기존에 제공되는 API로, streaming을 사용하기 위해서는 새로운 API 사용을 권장한다.

    2. renderToNodeStream(React.Node): Readable 는 streaming API를 처음으로 제공한 API지만, renderToPipeableStream로 교체할 것을 권장한다.

    3. renderToPipeableStream(React.Node, Options): Controls : 가장 추천하는 API로, <suspense>를 완전히 지원하고, 내용이 사라지는 현상 없이 code splitting을 지원한다. 또한, HTML을 스트리밍 방식으로 전달하여 나중에 채워넣는다.

      <aside> 💡 Code Splitting?

      코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있다.

      React에서는 lazy를 이용하여 처음으로 렌더링 될 때까지 코드를 로드하는 것을 지연할 수 있다.

      </aside>

  3. 기존 SSR 방식의 문제점은, 데이터 패칭 > HTML로 렌더링 > 브라우저에 전송 > 클라이언트에서 JS코드를 로딩 > 클라이언트에서 JS코드를 연결(Hydration)하는 과정을 순차적으로 진행해야 한다는 것이었다. React 18에서 Suspense를 통해 작은 독립된 단위로 나누고, 순차적으로 진행할 수 있다.

공식 문서 내용을 조금 더 자세히 살펴보자.

SSR

사용자 입장에서 앱을 실행하면 완전히 상호작용이 가능한 페이지를 보고 싶을 것이다. 하지만 이렇게 하게 될 경우, 모든 Javascript 이벤트 핸들러가 연결 되고, 클릭 버튼이 상태를 업데이트할 수 있는 작업까지 마쳐야 사용자는 비로소 화면을 볼 수 있는 것이다. 이러한 경우 Javascript가 모두 연결이 될 때까지 사용자는 빈 화면을 볼 것이다.

이것이 우리가 SSR을 사용하는 이유이며, 서버에서 먼저 상호작용이 불가능한 React Component를 먼저 렌더링을 한다. 이 방식을 하게 될 경우 사용자는 Javascript가 연결되는 동안 화면을 볼 수 있게 된다. 그 다음 React를 이용하여 HTML에 JS 이벤트 핸들러를 연결한다. 이 과정이 바로 Hydration이다.