[Learn Next.js] 스트리밍

데이터를 가져오는데 시간이 오래 걸리면 전체 페이지 렌더링이 차단됩니다. 이는 사용자 경험을 저하시킵니다.

이 문제를 해결하기 위해 스트리밍이라는 기술을 사용할 수 있습니다.

스트리밍

스트리밍이란 여러 데이터 가져오기 중 데이터 요청에 성공한 데이터부터 먼저 클라이언트로 전송하는 데이터 전송 기술입니다.

즉, 병렬로 여러 데이터 가져오기를 수행하더라도, 먼저 성공한 요청의 결과부터 클라이언트로 전송되어 UI에 표시됩니다.

스트리밍 구현 방법

스트리밍은 두 가지 방법을 이용해 구현할 수 있습니다.

1. 전체 페이지 수준에 스트리밍을 적용하기 위한 loading.tsx
2. 컴포넌트 수준에서 스트리밍을 적용하기 위한 Suspense

Loading.tsx 파일

같은 경로 수준에 있는 page.tsx 파일에서 데이터를 불러오는 동안 표시될 UI를 포함하는 파일입니다.

이 파일의 UI는 해당 경로 및 하위 경로 모두에 사용되지만, Route Groups를 통해 이 문제를 해결할 수 있습니다.

Route Groups

소괄호 이름을 가진 경로 폴더로 파일들을 묶을 수 있습니다. 이 폴더는 실제 URL에는 영향을 미치지 않기 때문에 섹션별로 폴더를 나누는데 유용합니다.

page.tsx 및 loading.tsx 파일을 이 폴더로 이동시키면 로딩 UI가 해당 페이지에만 적용됩니다.

Suspense 컴포넌트

전체 페이지에 대한 로딩 UI 대신 특정 컴포넌트를 불러오는 동안 적용할 로딩 UI가 필요할 수도 있습니다.

다음 코드는 비동기 작업을 수행하는 RevenueChart 컴포넌트를 완전히 불러오는 동안 RevenueChartSkeleton 컴포넌트를 표시합니다.

<Suspense fallback={<RevenueChartSkeleton />}>
  <RevenueChart />
</Suspense>