Start independent data requests in parallel

Awaiting one request, then the next, then the next creates a waterfall: the page takes as long as all requests added together. Independent requests should never wait on each other.

• Promise.all: start requests that do not depend on each other together, so the page waits only for the slowest one.
• Suspense per component: split the page into components that each fetch their own data inside a boundary, so fast parts appear first.
• React cache: share one request between generateMetadata and the page so the same data is not fetched twice.

Only keep requests sequential when the second one truly needs the result of the first, such as loading a user and then that user's team.

export default async function Page({ params }: PageProps<'/artist/[id]'>) {
  const { id } = await params;
  const [artist, albums] = await Promise.all([getArtist(id), getAlbums(id)]);
  return <ArtistView artist={artist} albums={albums} />;
}