Snippet

Optimizing Server Component Data Fetching with Parallel Promises

In Next.js Server Components, sequentially awaiting multiple async calls creates a 'waterfall' where each request must finish before the next starts. By initiating promises simultaneously and awaiting them with Promise.all, we significantly reduce the total load time.

snippet.js

javascript

import { getPosts, getCategories } from '@/lib/api';
 
export default async function Dashboard() {
  // Fetching data in parallel to avoid waterfalls
  const postsPromise = getPosts();
  const categoriesPromise = getCategories();
 
  const [posts, categories] = await Promise.all([postsPromise, categoriesPromise]);
 
  return (
    <div>
      <PostList items={posts} />
      <CategorySidebar items={categories} />
    </div>
  );
}

nextjs

Breakdown

const postsPromise = getPosts();

Initiates the fetch operation immediately without blocking execution.

await Promise.all([...])

Waits for all promises to resolve concurrently, maximizing throughput.

Previous snippet Next snippet

More Expert JavaScript exercises →

Optimizing Server Component Data Fetching with Parallel Promises

Related