[React] Suspense on the server - 간단하게

Suspense on the server

New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/react-18

 

서버 사이드 렌더링

리엑트의 서버 사이드 렌더링은 다음의 단계로 진행된다.

1. 서버에서 전체 앱에 대한 데이터를 가져온다.
2. 서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보낸다.
3. 클라이언트에서 전체 앱에 대한 JavaScript 코드를 로드한다.
4. 클라이언트에서 JavaScript 논리를 전체 앱에 대해 서버 생성 HTML에 연결한다.
   ===> 이것이 "hydration"인데, Hydration은 Dry한 HTML에 수분(Javascript)을 공급하는 개념이다.

 

여기에서 문제점은?

핵심 부분은 다음 단계가 시작되기 전에 각 단계가 전체 앱에 대해 한 번에 완료되어야 한다는 것이다. (동기 방식 및 Waterfall 방식) 거의 모든 중요하지 않은 앱의 경우처럼 앱의 일부가 다른 부분보다 느린 경우 이는 효율적이지 않다. 왜냐하면 한 페이지에 여러 컴포넌트가 있을 때, HTML 생성이 오래 걸리는 컴포넌트가 있고 그렇지 않은 컴포넌트가 있는데, 빨리 생성된 컴포넌트가 다른 컴포넌트를 위해서 계속 기다려야 하기 때문에 비효율적이게 된다.

 

리액트 18에서 Suspense로 문제 해결하기

React 18을 사용하면 <Suspense />를 사용해 앱을 더 작은 독립 단위로 나눌 수 있다. 이 단위는 서로 독립적으로 이러한 단계를 거치며 앱의 나머지 부분을 차단하지 않는다. 결과적으로 앱 사용자는 콘텐츠를 더 빨리 보고 훨씬 빠르게 상호 작용할 수 있다. 앱에서 가장 느린 부분은 빠른 부분을 끌어내리지 않는다. 이러한 개선 사항은 자동이며 작동하기 위해 특별한 조정 코드를 작성할 필요가 없다.