들어가며
React 18에서 추가된 동시성(Concurrency)이라는 개념에 대해 알아보던 중 Streaming Server Rendering with Suspense 라는 제목의 영상을 접하게 되었습니다.
해당 영상에서는 SSR 렌더링이 어떻게 UX를 저하시키는지에 대한 3가지 병목을 소개하면서 Concurrent UI pattern인 Suspense를 통해 문제를 어떻게 해결할 수 있는지를 설명하고 있습니다.
동시성이란
동시성을 잘 표현하고 있는 그림입니다. 동시성은 CS차원에서 멀티 태스킹과 유사한 개념으로 이해할 수 있습니다.
동시성은 병렬성과 비교될 수 있는데, 병렬적으로 처리하는 것은 두 개의 다른 스레드를 동시에 처리하는 것입니다.
반면 동시성은 하나의 스레드에서 두 가지 일을 Context Switching을 통해 동시에 처리하는 것처럼 보이게 하는 것입니다.
2개 이상의 독립적인 작업을 잘게 나누어
동시에 실행되는 것처럼 보이도록 프로그램을 구조화하는 방법
Streaming Server Rendering이란
Server Side Rendering과 유사한 개념입니다.
Streaming Server Rendering 또한 Streaming Server라는 서버단에서 빌드된 HTML을 렌더링하고 이후 JavaScript를 로드하여 Hydration하는 방식입니다.
한편, 위 렌더링 방식은 다음과 같은 3가지 병목을 가지고 있습니다.
3 blocking problems
- Fetch everything, show anything
- Load everthing, hydrate anything
- Hydrate everything, interact with anything
Fetch everything, show anything
모든 패칭이 완료되어야 UI가 보입니다.
SSR은 서버 사이드에서 상호작용이 불가능한 HTML을 먼저 전달함으로써 초기 로딩 성능을 향상시켰지만, 해당 HTML을 로딩하기 위해 data fetching을 하지 않으면 어느 것도 볼 수 없습니다.
위 그림에서, Comments 영역은 댓글을 보여주는 영역입니다. 만약 댓글 데이터가 방대하여 패칭이 오래 걸리는 경우 해당 페이지 자체가 흰 화면으로 노출되고 있을 것입니다.
Load everthing, hydrate anything
모든 로드가 완료되어야 hydration을 진행할 수 있습니다.
첫번째 병목과 마찬가지로, 모든 컴포넌트가 로드되고 나서야 JavaScript가 제자리를 찾아가는 hydration 과정이 수행될 수 있습니다.
Hydrate everything, interact with anything
모든 컴포넌트가 hydration을 수행하고 나서야 모든 상호작용이 가능해집니다.
많은 데이터를 보유하고 있어 가장 무거운 Comments 컴포넌트가 hydration을 마무리하기 전까지는 Profile을 눌러도 상호작용할 수 없습니다.
Suspense의 역할
위 세 가지 병목을 Concurrent하게 해결해주는 것이 React Suspense입니다.
<Suspense fallback={<Loading />}
<Component />
</Suspense>Suspense Provider로 좋은 UX를 방해하는, 로딩이 긴 컴포넌트를 감싸주어
데이터 패칭/로딩/하이드레이션 과정을 ‘분리’할 수 있습니다.
Comments 컴포넌트가 data를 여전히 fetching 중이라면 Suspense의 fallback UI를 먼저 보여줘서 유저가 '열심히 로딩하고 있군!'이라고 생각할 수 있게 도와줍니다.
선택적 hydration을 표현한 그림입니다.
Comments 컴포넌트는 여전히 hydrating 중이지만, 유저가 Nav 컴포넌트를 클릭했다면 다른 Url로 네비게이팅 할 수 있습니다.
마치며
React 18 이전에는 하나의 widget 컴포넌트가 가지고 있는 내부 컴포넌트들이 모두 로딩되어야 UI를 볼 수 있고, SSR이라면 모두 hydration 되고 난 후에야 사용자 상호작용이 가능했는데
Suspense로 인해 각 컴포넌트의 독립적인 컨트롤이 가능해졌습니다.
기존의 동기적인 방식에서 벗어나 Suspense라는 새로운 구조를 통해 유저에게 더 나은 경험을 제공하고 SSR이 가진 blocking problems를 해결할 수 있음을 알게 되었습니다.
