Sequential Fetching 데모

파일 구조

sequential-fetching/
└── page.tsx
    ├── getArtist()      → 1초 지연 → artist.id 획득
    └── getPlaylists(id) → 1.5초 지연 → 플레이리스트 반환

핵심 파일 코드

// sequential-fetching/page.tsx
const Page = async () => {
  // Step 1: 아티스트 먼저 (1초)
  const artist = await getArtist();

  // Step 2: ID로 플레이리스트 (1.5초)
  // → artist.id가 있어야 호출 가능 (워터폴)
  return (
    <>
      <ArtistInfo artist={artist} />
      <Suspense fallback={<PlaylistsSkeleton />}>
        <PlaylistsSection artistId={artist.id} />
      </Suspense>
    </>
  );
};