Streaming

스트리밍이란 무엇인가요?

스트리밍은 경로를 더 작은 '청크'로 나누고 준비가 되면 서버에서 클라이언트로 점진적으로 스트리밍할 수 있는 데이터 전송 기술입니다.

스트리밍을 사용하면 느린 데이터 요청으로 인해 전체 페이지가 차단되는 것을 방지할 수 있습니다. 이를 통해 사용자는 모든 데이터가 로드될 때까지 기다리지 않고도 페이지의 일부를 보고 상호 작용할 수 있으며, UI가 사용자에게 표시될 수 있습니다.

스켈레톤 ui 적용

// loading.tsx
import DashboardSkeleton from '@/app/ui/skeletons';

export default function Loading() {
  return <DashboardSkeleton />;
}

// Loading animation
const shimmer =
  'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';

export default function DashboardSkeleton() {
  return (
    <>
      <div
        className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
      />
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <CardSkeleton />
        <CardSkeleton />
        <CardSkeleton />
        <CardSkeleton />
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChartSkeleton />
        <LatestInvoicesSkeleton />
      </div>
    </>
  );
}

경로 그룹의 로딩 스켈레톤 버그 수정하기

이제 로딩 스켈레톤이 인보이스 및 고객 페이지에도 적용됩니다.

loading.tsx는 파일 시스템에서 /invoices/page.tsx 및 /customers/page.tsx보다 상위 레벨에 있으므로 해당 페이지에도 적용됩니다.

경로 그룹을 사용하여 이를 변경할 수 있습니다. 대시보드 폴더 안에 /(overview) 라는 새 폴더를 만듭니다. 그런 다음 loading.tsx 및 page.tsx 파일을 폴더 안으로 옮깁니다

이제 loading.tsx 파일은 대시보드 개요 페이지에만 적용됩니다.

경로 그룹을 사용하면 URL 경로 구조에 영향을 주지 않고 파일을 논리적인 그룹으로 구성할 수 있습니다. 괄호()를 사용하여 새 폴더를 만들면 그 이름이 URL 경로에 포함되지 않습니다. 따라서 /dashboard/(overview)/page.tsx는 /dashboard가 됩니다.

여기서는 경로 그룹을 사용하여 loading.tsx가 대시보드 개요 페이지에만 적용되도록 하고 있습니다. 그러나 경로 그룹을 사용하여 애플리케이션을 섹션(예: (마케팅) 경로 및 (상점) 경로)으로 분리하거나 더 큰 애플리케이션의 경우 팀별로 분리할 수도 있습니다.

컴포넌트 스트리밍하기

지금까지는 전체 페이지를 스트리밍하고 있습니다. 하지만 React Suspense를 사용하면 더 세분화하여 특정 컴포넌트를 스트리밍할 수 있습니다.

Suspense를 사용하면 특정 조건(예: 데이터가 로드될 때까지)이 충족될 때까지 애플리케이션의 일부 렌더링을 연기할 수 있습니다. 동적 컴포넌트를 Suspense로 래핑할 수 있습니다. 그런 다음 동적 컴포넌트가 로드되는 동안 표시할 폴백 컴포넌트를 전달합니다.

느린 데이터 요청인 fetchRevenue()를 기억하신다면 이 요청이 전체 페이지를 느리게 하는 요청입니다. 페이지를 차단하는 대신 Suspense를 사용하여 이 컴포넌트만 스트리밍하고 페이지의 나머지 UI를 즉시 표시할 수 있습니다.

일반적으로 서스펜스 및 데이터 가져오기 작업 시 모범 사례로 간주되는 것은 무엇인가요?

✅ 데이터 가져오기를 필요한 컴포넌트로 이동합니다.

데이터 가져오기를 필요한 컴포넌트로 이동하면 서스펜스 경계를 더 세분화할 수 있습니다. 이를 통해 특정 컴포넌트를 스트리밍하고 UI가 차단되는 것을 방지할 수 있습니다.