Parallel Fetching 데모

파일 구조

parallel-fetching/
└── page.tsx
    ├── getArtist()  → 1초 지연
    ├── getAlbums()  → 1.5초 지연
    └── Promise.all([getArtist(), getAlbums()])

핵심 파일 코드

// parallel-fetching/page.tsx
const Page = async () => {
  // 두 요청을 동시에 시작!
  const [artist, albums] = await Promise.all([
    getArtist(),   // 1초
    getAlbums(),   // 1.5초
  ]);
  // → 총 ~1.5초 (가장 느린 요청 기준)

  return (
    <>
      <ArtistInfo artist={artist} />
      <AlbumList albums={albums} />
    </>
  );
};