Next.js › Data Fetching

How do you fetch multiple pieces of data in parallel to avoid slow, sequential loading?

Intermediate

Answer

You start all your fetch calls first without awaiting each one immediately, collect the resulting promises, and then use Promise.all to wait for all of them to finish together, so the total wait time is roughly as long as the slowest single request instead of the sum of all requests.

export default async function Page() {
  const postsPromise = fetch('https://api.example.com/posts').then(r => r.json());
  const usersPromise = fetch('https://api.example.com/users').then(r => r.json());
  const [posts, users] = await Promise.all([postsPromise, usersPromise]);
  return <div>{/* render posts and users */}</div>;
}

Real-world example A dashboard page fetches the user's profile, recent orders, and notification count all at the same time using Promise.all, instead of waiting for each request to finish one after another, cutting the total load time significantly.

Common follow-ups: What happens if one of the parallel requests fails while the others succeed?;How does this pattern work together with Suspense and streaming?

Loading UI & Streaming with Suspense;Caching