Skip to main content
← 스터디로 돌아가기

Streaming 데모

Streaming은 서버가 준비된 부분부터 점진적으로 전송하여 사용자가 더 빨리 콘텐츠를 볼 수 있게 합니다. 아래 링크를 클릭하면 loading.tsx의 skeleton이 먼저 표시되고, 서버 렌더링이 완료되면 실제 콘텐츠로 교체됩니다.

파일 구조

streaming/
├── page.tsx          ← 현재 페이지
└── dashboard/
    ├── page.tsx      ← 느린 dynamic 페이지 (2초 지연)
    └── loading.tsx   ← Skeleton UI (즉시 표시)
Dashboard로 이동 (2초 지연) →

체험 포인트: Dashboard 링크를 클릭하면 즉시 loading skeleton이 나타납니다. Next.js가 자동으로 page.tsx를 <Suspense>로 래핑하기 때문입니다. 약 2초 후 실제 콘텐츠로 교체됩니다.

핵심 파일 코드

// streaming/page.tsx
<Link href="/demo/nextjs/16.1.6/linking-and-navigating/streaming/dashboard">
  Dashboard로 이동
</Link>

// streaming/dashboard/page.tsx
export const dynamic = 'force-dynamic'
await new Promise((resolve) => setTimeout(resolve, 2000))

// streaming/dashboard/loading.tsx
export default function Loading() {
  return <DashboardSkeleton />
}