Skip to main content

Streaming + Suspense 데모

이 페이지는 두 가지 스트리밍 메커니즘을 보여줍니다. loading.tsx는 페이지 전체의 즉시 로딩 상태를, Suspense는 특정 컴포넌트의 세밀한 로딩 상태를 제공합니다.

파일 구조

streaming-demo/
├── loading.tsx   ← 페이지 전체 Skeleton (즉시 표시)
└── page.tsx      ← Suspense로 SlowRecommendations 래핑

Suspense fallback: 추천 데이터 로딩 중...

핵심 파일 코드

// streaming-demo/page.tsx
import { Suspense } from 'react';

const SlowRecommendations = async () => {
  await delay(2000); // 2초 지연
  return <div>추천 플레이리스트...</div>;
};

const Page = async () => {
  return (
    <Suspense fallback={<RecommendationsSkeleton />}>
      <SlowRecommendations />
    </Suspense>
  );
};

// streaming-demo/loading.tsx
const Loading = () => {
  return <PageSkeleton />;
  // → Next.js가 자동으로 page.tsx를
  //   <Suspense fallback={<Loading />}>로 래핑
};

체험 포인트: loading.tsx는 네비게이션 시 페이지 전체 skeleton을 즉시 표시합니다. 페이지가 로드된 후에는 <Suspense>가 개별 컴포넌트의 로딩 상태를 관리합니다. 새로고침하면 두 단계를 모두 확인할 수 있습니다.

← 데모 목록으로 돌아가기