Parallel Data Fetching in Server Components

Snippet

Parallel Data Fetching in Server Components

By initiating multiple fetch requests without 'await' and then using Promise.all, you avoid 'waterfalls' where requests happen sequentially. This significantly reduces the total loading time of a Next.js page.

snippet.js
javascript
export default async function Page({ params }) {
  const userData = getUser(params.id);
  const postsData = getPosts(params.id);
 
  const [user, posts] = await Promise.all([userData, postsData]);
 
  return <div>{user.name} has {posts.length} posts</div>;
}

nextjs

Breakdown

const userData = getUser(params.id)

Starts the promise immediately without blocking the next line.

await Promise.all([userData, postsData])

Waits for all initiated requests to complete concurrently.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Parallel Data Fetching in Server Components

Related