[NextJs] Streaming을 이용하여 최대한 빠르게 컨텐츠를 표시할 수 있습니다

[참고: Streaming]

Routing: Loading UI and Streaming | Next.js

 

Streaming allows you to break down the page's HTML into smaller chunks and progressively send those chunks from the server to the client.

 

일반적으로 서버 렌더링은 아래와 같은 과정으로 진행됩니다.

 

1. 주어진 페이지의 모든 데이터를 서버에서 가져옵니다.
2. 서버가 페이지의 HTML을 렌더링합니다.
3. 페이지의 HTML, CSS, 자바스크립트를 클라이언트로 보냅니다.
4. 비상호작용 UI가 생성된 HTML과 CSS를 사용하여 표시됩니다.
5. 마지막으로 React가 UI를 상호작용 가능하도록 하이드레이트(hydrate)합니다.

이러한 서버 렌더링 방식은 클라이언트 렌더링 방식의 한계인 초기 로딩을 줄여줍니다.

하지만 위의 과정에서 알 수 있듯이 여전히 최소한의 파일(초기 HTML, CSS)는 모두 가져와야 화면이 렌더링됩니다.

 

이러한 방식은 스트리밍이 포함된 서버 렌더링으로 크게 개선될 수 있습니다.

스트리밍을 사용하면 페이지의 HTML을 더 작은 청크로 나누고, 이 청크들을 서버에서 클라이언트로 점진적으로 전송할 수 있습니다. 이를 통해 모든 데이터를 로드하기 전에 페이지의 일부를 더 빨리 표시할 수 있습니다.

 

예륻들어 아래와 같이 "Posts" 페이지를 나타내는 컴포넌트가 존재한다고 가정하면,

import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
        <PostFeed />
        <Weather />
    </section>
  )
}

 

서버에서 <PostFeed />와 <Weather /> 컴포넌트의 초기 구성 파일을 렌더링한 후 전달해줄 것입니다.

이것은 일반적이지만, 만약 <Posts /> 페이지의 핵심은 <PostFeed /> 이고 <Weather /> 보다 상대적으로 크기가 작다고 가정하였을 때 사용자에게 우선 <Posts /> 를 먼저 보여주고 <Weather />은 도착한대로 후속적으로 보여주는게 더 합리적일것입니다.

이것을 가능하게 하는 것이 `Streaming`입니다.

 

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

 

앞선 인용 문장에서 스트리밍은 HTML을 작은 청크로 나눠서 점진적으로 보내준다고 하였습니다.

여기서 청크의 단위를 <Suspense>로 래핑된 컴포넌트로 볼 수 있습니다.

 

즉, <Posts /> 하나의 HTML 페이지를 <PostFeed />와 <Weather /> 청크로 분리한 후 스트리밍하게 되는 것입니다.

단순 수치로 예시를 들면, <PostFeed />를 렌더링하는데 1초, <Weather />를 렌더링하는데 3초가 걸려서 <Posts /> 페이지가 렌더링되는데 총 4초가 걸렸던 것이 스트리밍으로 인해 페이지 접근 1초 후에 <PostFeed />가 렌더링된 후 사용자에게 보여지고 이후 2초 후에 <Weather />가 렌더링되어 사용자에게 보여지게됩니다.