Fetching Data 데모

Next.js App Router에서 서버 컴포넌트를 활용한 다양한 데이터 페칭 패턴을 직접 체험할 수 있습니다. 각 데모는 실제 지연 시간을 시뮬레이션하여 차이를 체감할 수 있도록 만들었습니다.

파일 구조

fetching-data/
├── layout.tsx
├── page.tsx                ← 현재 페이지 (인덱스)
├── streaming-demo/
│   ├── page.tsx            ← Suspense + 느린 컴포넌트
│   └── loading.tsx         ← Skeleton UI
├── sequential-fetching/
│   └── page.tsx            ← 순차 데이터 페칭
└── parallel-fetching/
    └── page.tsx            ← 병렬 데이터 페칭

Streaming + Suspense

loading.tsx와 Suspense를 사용한 점진적 스트리밍을 체험합니다. 느린 비동기 컴포넌트가 준비되는 동안 skeleton UI가 먼저 표시됩니다.

Sequential Fetching (순차 요청)

아티스트 정보를 먼저 가져온 후, 그 ID로 플레이리스트를 가져오는 워터폴 패턴입니다. 의존 관계가 있는 데이터에 적합합니다.

Parallel Fetching (병렬 요청)

Promise.all로 아티스트와 앨범 데이터를 동시에 가져와 총 대기 시간을 단축합니다. 독립적인 데이터에 적합합니다.

Tip: 모든 데모는 Server Component로 작성되어 있어 'use client'가 없습니다. 서버에서 직접 async/await로 데이터를 가져오는 패턴을 확인하세요.