1. 개요

스트리밍 : 서버에서 클라이언트로 데이터를 넘겨야할 때 보내야할 데이터가 크거나 준비시간이 오래걸릴 때 데이터를 여러개의 조각으로 나눈 후 하나씩 전송한다.

데이터가 모두 불러와지지 않은 상태에서도 먼저 불러올 수 있는 컴포넌트를 불러오고 나중에 랜더링이 오래걸리는 페이지를 불러온다.

dynamic page에서 자주 사용한다.
static page에 비해 미리 페이지를 그릴 수 없어 페이지 응답이 오래 걸릴 때 스트리밍을 사용해 빠르게 랜더링이 되는 부분만 먼저 보여주고 오래 걸리는 컴포넌트는 후속으로 가져온다.

2. 사용법

1) 페이지 스트리밍 적용

폴더 내 loading.js나 loading.tsx 파일을 만든다. 그러면 같은 폴더와 하위 폴더의 dynamic page 파일이 로딩중일 때 만든 loading 파일이 대체 ui로 스트리밍된다.

주의사항/특징

• 해당 폴더와 하위 폴더 모두 적용이 된다.
• 모든 페이지에 스트리밍 되는 것이 아니라 async가 붙어 비동기로 작동하는 페이지 컴포넌트에만 제공한다. 동기적인 컴포넌트라면 적용되지 않는다.
• loading 파일은 페이지 컴포넌트에만 적용된다. 일반적인 컴포넌트는 적용불가능
• loading 파일은 쿼리스트링이 변경될때는 트리거 되지 않는다. - 쿼리스트링의 값이 바뀌면 적용되지 않는다.

2) 컴포넌트 스트리밍

컴포넌트와 쿼리스트링에서 스트리밍을 사용하는 방법이다.

import { Suspense } from "react";


 <Suspense key={searchParams.q || ''}  fallback={<div>Loading...</div>}>
      <SearchResult q={searchParams.q || ""}/>
    </Suspense>

1. suspense를 import해온다.
2. 원하는 컴포넌트를 suspens로 감싼다.
3. fallback 함수를 통해 대체 ui를 설정한다.
4. query string이 있을 때는 바뀌는 key값을 적용해준다.