Streaming SSR

React 18의 새로운 아키텍쳐

 

기존 SSR의 동작방식

1. 페이지의 모든 데이터를 서버에서 가져온다. (server)
2. 서버에서 HTML 문서를 사전 렌더링 한다. (server)
3. 사전 렌더링된 HTML 문서와 JavaScript, CSS가 클라이언트로 전송된다. (client)
4. 브라우저 화면에 사용자 상호작용이 추가된다. hydrate (client)

 

기존 SSR의 문제

SSR의 동작은 순차적이고 차단적이다. (blocking) 모든 데이터를 가져온 후에만 HTML이 렌더링되고 모든 JavaScript가 다운로드 되어야 hydrate가 시작된다.

<Layout>
  <NavBar />
  <Sidebar />
  <Post />
  <Comments />
</Layout>

위와 같은 마크업을 가진 페이지가 있다. Comments의 데이터를 가져오는데 많은 시간이 든다고 하면 Sidebar나 Post가 먼저 준비되더라도 Comments를 기다려야한다.

 

출처 : https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

 

 

위에는 Next의 공식문서에 있는 그림이다. TTFB는 브라우저에서 요청 후 처음 byte (정보)가 브라우저에 도달하는 시간을 의미한다. 이 시간이 길어질수록 작업이 지연되고 사용자 경험에 안 좋은 영향을 미친다.

 

Streaming

스트리밍은 각 컴포넌트를 하나의 청크(묶음)로 간주하여 우선순위가 높거나 데이터에 의존하지 않는 컴포넌트를 먼저 전송할 수 있고 Hydrate를 일찍 시작할 수 있다.

즉 서버에서 HTML을 여러개의 청크로 나뉘서 렌더링하고, 렌더링이 완료된 것 부터 먼저 클라이언트로 전송하는 것이다. TTFB가 줄어든다.

 

 

출처 : https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

 

Suspense

React Suspense가 이 streaming을 사용한다. Suspense를 사용해야 Streaming이 된다. 사용하지 않으면 기존의 SSR과 같은 방식으로 동작한다.

<Layout>
  <NavBar />
  <Sidebar />
  <Post />
  <Suspense fallback={<Spinner />}>
    <Comments />
  </Suspense>
</Layout>

Streaming으로 인해 Comments 를 기다리지 않고(Comments가 코드 스플리팅 된것.) 렌더링이 되고 있으며 Comments가 렌더링이 완료될 때까지 Spinner가 이를 대체한다. Comments의 렌더링이 완료되면 해당 부분만 브라우저로 보낸다.

 

Selective Hydrate

선택적 수화

Suspense를 사용하면 코드 스플리팅이 자동으로 이루어진다. 위 예제 코드에서 Comments의 JavaScript 코드는 자동으로 다른 번들로 코드 스플리팅이 된다. 번들 사이즈도 줄어들고 해당 페이지의 다른 청크의 hydrate를 막지 않는다.

.