React Streaming SSR 알아보기

JangGwon·2024년 4월 14일

들어가며

최근 모던 리액트 딥다이브에서 4장 서버사이드 렌더링 부분을 읽은 후 추가적으로 공식문서와 여러 기술블로그에서 공부를 진행하다가 리액트 18에 추가된 Streaming SSR의 존재를 알게 되었습니다. 책에는 해당 부분이 작성되어있지 않아 자세히 공부겸 정리를 해봤습니다.

React 18이전의 SSR 방식

최초 웹사이트 진입시 서버는 HTML렌더링에 필요한 파일들을 불러온다
서버에서 renderToString 함수를 통해서 간략히 렌더링을 진행하고 HTML파일을 만든다.
서버에서 HTML파일이 다 만들어진다면 클라이언트에서 해당 HTML파일을 내려받고 자바스크립트 파일을 까지 모두 로드한다.
이후 클라이언트에서 해당 HTML파일과 자바스크립트 파일을 모두 받은 후 Hydrate 작업을 수행한다.

그래서 단점은 ?

React 컴포넌트의 상호 의존적인 특성으로 인해 서버는 모든 데이터를 다 가져와야만 컴포넌트 렌더링을 시작할 수 있고 이후 HTML를 클라이언트에 보낼 수 있다.
클라이언트에서 하이드레이션 작업을 하기 전에 모든 HTML과 자바스크립트가 다운로드 되어있어야한다.
하이드레이션 프로세스는 한 번에 진행되어야 하지만 구성 요소는 하이드레이션이 완료된 후에만 상호 작용할 수 있으므로 사용자는 하이드레이션이 완료되기 전에는 페이지와 상호 작용할 수 없다.

결국 이런 렌더링 과정들이 폭포수 모델처럼 진행되며 어느 한 과정에서라도 정체가 생기거나 진행 되지 않는다면? 사용자들에게 페이지가 보이는데 지연되거나 반응하지 않는 블로킹 현상이 일어날 수 있다.

React 18버전에 추가된 Streaming SSR

Streaming SSR 이란?
Streaming SSR은 가장 빠르게 그릴 수 있는 부분을 먼저 랜더링을 진행하고 이후는 Node.js의 스트림을 이용해 점진적으로 렌더링 하는 방식으로 Suspense, 코드 분할, 스트리밍 HTML 및 선택적 Hydrate를 이용한다.

Streaming SSR를 이용한다면 기존의 워터폴 방식의 렌더링 방식에서 위와 같은 방식으로 바뀌면서 많은 시간이 단축 될 수 있다.
어째서 가능할까요?

Suspense를 이용한 HTML 스트리밍과 선택적 Hypdrate

Suspense란?
개발자가 애플리케이션의 특정 부분이 데이터를 기다리고 있음을 React에 알릴 수 있는 메커니즘으로 그 동안 React는 그 자리에 폴백 UI를 표시하고 데이터가 준비되면 이를 업데이트하는 기능이다.

HTML 스트리밍

HTML 스트리밍이란? 컴포넌트들을 각각 청크로 분리하고나서 Suspense로 감싼 뒤에 리액트에게 컴포넌트를 기다리지 말고 우선 나머지 페이지에 대해서 HTML을 Streaming 할 수 있게하는 기능으로 Suspense에 감싸진 컴포넌트가 준비되기 전까지 fallback UI를 보여주도록 할 수 있기도하고 각 컴포넌트(청크)들에게 우선순위도 설정할 수 있다.

그래서 화면의 일부가 최초 HTML을 보내는 작업을 지연시키면, 해당 부분만 HTML 스트리밍 상에 나중에 들어오게 할 수 있으며, 작업이 완료된다면 Stram으로 script와 함께 컴포넌트를 넣어주기 때문에 데이터가 특별한 순서에 맞춰서 로딩될 필요도 없다!

선택적 Hypdrate

기존에는 서버에서 HTML로 렌더링이 모두 끝난 이후에 Hypdrate 작업을 진행했지만, 그럴 필요없이 선택적 Hypdrate를 통해 리액트 코드의 부분부분이 로드될 때마다 해당 부분들을 Hypdration을 진행한다.
(이것이 가능한 이유는 컴포넌트 부분 부분들을 suspense를 씌웠기 때문!)

또 한, 사용자가 상호 작용한 부분에 하이드레이션 대기열에 우선순위를 지정할 수 있습니다.

결과적으로

결과적으로 Streaming SSR을 통해 기존의 워터폴 방식의 렌더링 문제를 해결하여 초기 페이지 로드 시간 감소 그리고. 선택적 하이드레이션을 통한 사용자 상호작용이 필요한 부분에 우선순위를 두어 초기 상호작용성을 개선하는 등 웹 애플리케이션의 성능 최적화와 UX 향상시켰다