Parallel data fetching pattern in NextJS

Introduction

Fetching data in parallel helps your app get multiple pieces of information at the same time. This makes your app faster and smoother for users.

When you need to load data from several APIs or sources at once.

When you want to show different parts of a page that depend on different data.

When you want to reduce waiting time by not fetching data one after another.

When building dashboards or pages with multiple widgets that each need data.

When you want to improve user experience by loading data efficiently.

Syntax

NextJS

const [data1, data2] = await Promise.all([fetch(url1).then(res => res.json()), fetch(url2).then(res => res.json())]);

Promise.all runs multiple promises at the same time and waits for all to finish.

Use await to pause until all data is ready.

Examples

This fetches user info and posts at the same time, then waits for both.

NextJS

const [user, posts] = await Promise.all([
  fetch('https://api.example.com/user').then(res => res.json()),
  fetch('https://api.example.com/posts').then(res => res.json())
]);

Fetching comments, likes, and shares in parallel for a social media post.

NextJS

const [comments, likes, shares] = await Promise.all([
  fetch('/api/comments').then(r => r.json()),
  fetch('/api/likes').then(r => r.json()),
  fetch('/api/shares').then(r => r.json())
]);

Sample Program

This Next.js component fetches user info and their posts at the same time. It then shows the user's name and a list of their posts. Fetching in parallel makes the page load faster.

NextJS

import React from 'react';

export default async function Dashboard() {
  const [user, notifications] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json()),
    fetch('https://jsonplaceholder.typicode.com/posts?userId=1').then(res => res.json())
  ]);

  return (
    <main>
      <h1>Welcome, {user.name}!</h1>
      <section aria-label="User notifications">
        <h2>Your Posts</h2>
        <ul>
          {notifications.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </section>
    </main>
  );
}

Important Notes

If one fetch fails, Promise.all rejects immediately. Handle errors with try/catch.

Use parallel fetching only when requests are independent to avoid unnecessary load.

Summary

Parallel data fetching gets multiple data sources at once to speed up loading.

Use Promise.all with await to run fetches together.

This pattern improves user experience by reducing wait times.