Streaming w Suspense

지난 글에서 React가 애플리케이션의 전체 수명을 줄이는 방법으로 Server Streaming 및 Suspense를 고안한 것을 살펴봤다. 이번 글에서는 어떻게 Suspense를 통해 Streaming Rendering이 이루어지는지 알아보자

Server Side Rendering(SSR)

SSR을 사용하면 사용자가 페이지를 보고 상호작용하기 전에 완료해야 하는 일련의 단계가 있다.

1. 특정 페이지의 모든 데이터를 서버에서 가져온다.
2. 서버에서 페이지의 HTML을 렌더링한다.
3. 페이지의 HTML, CSS, JavaScript가 클라이언트로 전송된다.
4. 생성된 HTML, CSS를 사용해 non-interactive UI가 먼저 표시된다.
5. React가 UI에 hydrate하여 interactive하게 만든다.

• SSR이 이루어지는 단계는 그림과 같이 순차적이고 차단적(blocking)이다.
  

  • 위 단계는 반드시 순차적으로 이루어진다.
  • 이 과정에서 페이지 렌더링 차단이 발생한다.

• 단계별 특징을 다시 한번 자세히 살펴보자.

  1. 특정 페이지의 모든 데이터를 서버에서 가져온다.

  2. 서버에서 페이지의 HTML을 렌더링한다.

     • 1단계가 완료되어야 HTML을 렌더링할 수 있다.
     • 즉, 서버에서 모든 데이터 패치를 완료해야한다는 점이 여전히 속도를 느리게 할 수 있다.

  3. 페이지의 HTML, CSS, JavaScript가 클라이언트로 전송된다.

  4. 생성된 HTML, CSS를 사용해 non-interactive UI가 먼저 표시된다.

     • SSR은 non-interactive 페이지를 최대한 빨리 보여준다.

  5. React가 UI에 hydrate하여 interactive하게 만든다.

     • 클라이언트는 모든 컴포넌트 코드가 다운로드 된 후에 hydrate할 수 있다.
       

Streaming

Streaming은 HTML을 더 작은 chunk로 분할하고, 서버에서 클라이언트로 점진적으로 전송할 수 있다.

Pros

• 페이지의 일부를 더 빨리 표시할 수 있다.

• 컴포넌트가 하나의 chunk로 간주되어 React의 컴포넌트 모델과 잘 어울린다.

• 우선순위가 높거나(ex. 핵심 정보), 데이터에 의존하지 않는 컴포넌트(ex. 레이아웃)를 먼저 전송할 수 있고, React가 hydration을 더 빠르게 시작할 수 있다.

  • 우선순위가 낮은 컴포넌트는 데이터를 가져온 후 동일한 서버 요청으로 전송할 수 있다.

• 페이지 렌더링 차단을 방지하는데 유용하다.

  • TTFB, FCP를 줄일 수 있으며 TTI를 개선한다.
    

Suspense

Suspense 바운더리로 비동기 컴포넌트를 래핑할 수 있다.

1. 액션이 진행되는 동안 fallback UI를 표시하다가
2. 액션이 완료된 후 컴포넌트를 교체하는 방식으로 동작한다.

<Suspense fallback={<Loading />}>
  <DataFetchingComponent />
</Suspense>

Pros

• Streaming Server Rendering
  • 서버에서 클라이언트로 HTML 점진적 렌더링한다.
  • UI의 어떤 부분이 동시에 점진적으로 더 많은 콘텐츠를 표시할 지 조정할 수 있다.
• Selective Hydration
  • React는 사용자 상호작용에 따라 어떤 컴포넌트를 먼저 interactive하게 만들지 우선순위를 정한다.

Reference

Routing: Loading UI and Streaming
Suspense – React