Parallel data fetching pattern in NextJS - Deep Dive

Overview - Parallel data fetching pattern

What is it?

Parallel data fetching pattern is a way to get multiple pieces of data at the same time instead of one after another. In Next.js, this means fetching data from different sources together to make the page load faster. Instead of waiting for one request to finish before starting the next, all requests start together and finish around the same time. This helps users see content quicker and improves the website experience.

Why it matters

Without parallel data fetching, websites wait for each data request to finish before starting the next, making pages slower and frustrating users. This pattern solves the problem by saving time and making pages feel faster and smoother. Faster loading means happier users, better engagement, and often better search rankings. It also helps developers write cleaner and more efficient code.

Where it fits

Before learning this, you should understand basic data fetching in Next.js, including async/await and React hooks. After mastering parallel data fetching, you can explore advanced performance optimization techniques like caching, suspense, and server components. This pattern fits into the bigger picture of building fast, scalable web apps.

Mental Model

Core Idea

Fetching multiple data sources at the same time speeds up page loading by not waiting for each request to finish before starting the next.

Think of it like...

It's like ordering all your food dishes at once in a restaurant instead of waiting for each dish to arrive before ordering the next. This way, all your food comes faster and you enjoy your meal sooner.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Fetch Data 1  │─────▶│               │      │               │
└───────────────┘      │               │      │               │
                       │               │─────▶│ Combine Data  │
┌───────────────┐      │   Parallel    │      │   & Render    │
│ Fetch Data 2  │─────▶│   Fetching    │      │   Page        │
└───────────────┘      │               │      │               │
                       │               │      │               │
┌───────────────┐      │               │      │               │
│ Fetch Data 3  │─────▶│               │      │               │
└───────────────┘      └───────────────┘      └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic data fetching

Concept: Learn how to fetch data in Next.js using async functions and hooks.

In Next.js, you can fetch data inside components using async functions like fetch or axios. For example, you can use useEffect with async/await to get data when the component loads. This is the starting point before optimizing fetching.

Result

You can load data from one source and display it on the page.

Understanding how to fetch data one at a time is essential before learning how to fetch multiple sources together.

2

Foundation

Sequential data fetching explained

Concept: Fetching data one after another means waiting for each request to finish before starting the next.

If you fetch data from API A, wait for it to finish, then fetch from API B, the total time is the sum of both requests. This is called sequential fetching and can slow down your app.

Result

Page load time equals the sum of all individual fetch times.

Knowing the cost of sequential fetching helps you see why parallel fetching is faster.

3

Intermediate

Implementing parallel fetching with Promise.all

🤔Before reading on: do you think Promise.all waits for all requests to finish or returns as soon as one finishes? Commit to your answer.

Concept: Use Promise.all to start multiple fetch requests at the same time and wait for all to finish together.

Promise.all takes an array of promises and returns a new promise that resolves when all promises resolve. In Next.js, you can fetch multiple APIs like this: const [data1, data2] = await Promise.all([ fetch('/api/data1').then(res => res.json()), fetch('/api/data2').then(res => res.json()) ]); This runs both fetches in parallel, saving time.

Result

Both data1 and data2 are available together faster than sequential fetching.

Using Promise.all unlocks the power of parallelism in JavaScript, making multiple data requests efficient.

4

Intermediate

Parallel fetching in Next.js server components

🤔Before reading on: do you think server components fetch data on client or server? Commit to your answer.

Concept: Next.js server components can fetch data in parallel on the server before sending HTML to the client.

In Next.js 13+, server components run on the server and can fetch data directly. You can use Promise.all inside async server components to fetch multiple data sources together: export default async function Page() { const [posts, users] = await Promise.all([ fetch('https://api.example.com/posts').then(r => r.json()), fetch('https://api.example.com/users').then(r => r.json()) ]); return ( <> ); } This improves performance by reducing client-side loading.

Result

Page HTML is sent with all data ready, improving user experience.

Leveraging server components with parallel fetching reduces client wait time and improves SEO.

5

Intermediate

Handling errors in parallel fetching

🤔Before reading on: do you think Promise.all fails all if one request fails or returns partial results? Commit to your answer.

Concept: Promise.all fails entirely if any fetch fails; you need strategies to handle partial failures.

If one fetch rejects, Promise.all rejects immediately. To handle this, you can wrap each fetch in a try-catch or use Promise.allSettled: const results = await Promise.allSettled([ fetch('/api/data1').then(r => r.json()), fetch('/api/data2').then(r => r.json()) ]); results will contain status and value or reason for each fetch, letting you handle errors gracefully.

Result

You can show partial data or fallback UI instead of breaking the whole page.

Knowing how to handle errors in parallel fetching prevents your app from crashing due to one bad request.

6

Advanced

Optimizing parallel fetching with caching and suspense

🤔Before reading on: do you think caching affects how parallel fetching works or only speeds up repeated requests? Commit to your answer.

Concept: Combine parallel fetching with caching and React Suspense to improve performance and user experience.

Next.js supports caching fetch results and React Suspense lets you show loading states while data loads. By caching, repeated requests return instantly. Suspense lets you coordinate multiple fetches and show fallback UI until all data is ready. This creates smooth, fast-loading pages with minimal flicker.

Result

Users see content faster and smoother with less waiting and flickering.

Combining parallel fetching with caching and Suspense creates a powerful performance boost beyond just parallel requests.

7

Expert

Internal concurrency and streaming in Next.js data fetching

🤔Before reading on: do you think Next.js sends the whole page after all data loads or streams parts as they become ready? Commit to your answer.

Concept: Next.js uses internal concurrency and streaming to send parts of the page as data arrives, improving perceived speed.

Next.js 13+ supports React Server Components with streaming HTML. When you fetch data in parallel, Next.js can start sending parts of the page immediately as soon as some data is ready, without waiting for all fetches. This uses React's internal concurrency model and streaming to improve perceived performance. It also allows progressive hydration on the client.

Result

Users see page content progressively, making the app feel faster and more responsive.

Understanding Next.js streaming and concurrency reveals how parallel fetching fits into a larger system for ultra-fast web apps.

Under the Hood

When you use Promise.all in Next.js, JavaScript starts all fetch requests simultaneously. Each fetch runs independently in the background. Promise.all waits for all these promises to resolve or any to reject. Next.js server components run on the server, so data fetching happens before HTML is sent to the browser. Internally, React's concurrent rendering and streaming allow parts of the UI to be sent as soon as their data is ready, improving perceived speed.

Why designed this way?

Parallel fetching was designed to overcome the slow, blocking nature of sequential requests. JavaScript's Promise API enables concurrency without threads, fitting well with Next.js's server rendering model. Streaming and concurrency in React and Next.js were introduced to improve user experience by reducing wait times and enabling progressive rendering. Alternatives like sequential fetching or blocking rendering were too slow or caused poor user experience.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ Start Fetch 1 │─────▶│               │      │               │
└───────────────┘      │               │      │               │
                       │               │─────▶│ Stream HTML   │
┌───────────────┐      │   Parallel    │      │ to Browser    │
│ Start Fetch 2 │─────▶│   Fetching    │      │               │
└───────────────┘      │               │      │               │
                       │               │      │               │
┌───────────────┐      │               │      │               │
│ Start Fetch 3 │─────▶│               │      │               │
└───────────────┘      └───────────────┘      └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Promise.all return partial results if one fetch fails? Commit to yes or no.

Common Belief: Promise.all returns results for all successful fetches even if one fails.

Reality: Promise.all rejects immediately if any promise rejects, returning no results.

Why it matters: Assuming partial results can cause your app to crash or show no data when only one fetch fails.

Quick: Is parallel fetching always faster than sequential fetching? Commit to yes or no.

Common Belief: Parallel fetching is always faster regardless of circumstances.

Reality: Parallel fetching can be slower if requests overload the network or server, or if data depends on previous results.

Why it matters: Blindly using parallel fetching can cause performance issues or bugs if dependencies exist.

Quick: Does Next.js client-side fetching automatically run in parallel? Commit to yes or no.

Common Belief: All client-side fetches in Next.js run in parallel by default.

Reality: Client-side fetches run in parallel only if coded that way; sequential code runs sequentially.

Why it matters: Misunderstanding this leads to slower apps when developers expect automatic parallelism.

Quick: Can you use Promise.all with non-promise values? Commit to yes or no.

Common Belief: Promise.all only works with promises and will fail with other values.

Reality: Promise.all treats non-promise values as resolved promises immediately.

Why it matters: Knowing this helps simplify code by mixing promises and values without extra wrapping.

Expert Zone

1

Parallel fetching can cause race conditions if data sources depend on each other; careful ordering or chaining is needed.

2

Using Promise.allSettled allows handling partial failures gracefully, which is crucial in unreliable network conditions.

3

Next.js streaming and React concurrency enable progressive hydration, improving perceived performance beyond raw fetch speed.

When NOT to use

Avoid parallel fetching when data requests depend on each other's results or when server rate limits exist. In such cases, use sequential fetching or batch APIs. Also, for very large numbers of requests, consider throttling or queuing to avoid overload.

Production Patterns

In production, developers combine parallel fetching with caching layers like SWR or React Query, use error boundaries for graceful failure, and leverage Next.js server components with streaming to deliver fast, SEO-friendly pages. They also monitor network and server load to balance concurrency.

Connections

Asynchronous programming

Parallel data fetching builds on asynchronous programming concepts like promises and async/await.

Understanding async programming fundamentals is essential to grasp how parallel fetching works and why it improves performance.

Concurrency in operating systems

Parallel fetching is a form of concurrency where multiple tasks run overlapping in time.

Knowing concurrency principles helps understand potential issues like race conditions and resource contention in parallel fetching.

Project management multitasking

Parallel fetching is like multitasking in project management, handling multiple tasks simultaneously to save time.

Seeing parallel fetching as multitasking clarifies why it speeds up processes and when it might cause conflicts.

Common Pitfalls

#1 Not handling fetch errors causes the entire Promise.all to fail and break the app.

Wrong approach:

const data = await Promise.all([
fetch('/api/one').then(res => res.json()),
fetch('/api/two').then(res => res.json())
]);

Correct approach:

const results = await Promise.allSettled([
fetch('/api/one').then(res => res.json()),
fetch('/api/two').then(res => res.json())
]);
const data = results.map(r => r.status === 'fulfilled' ? r.value : null);

Root cause:

Assuming all fetches succeed and not preparing for failures causes unhandled rejections.

#2 Sequentially awaiting fetches inside a loop causes slow loading.

Wrong approach:

const data = [];
for (const url of urls) {
const res = await fetch(url);
data.push(await res.json());
}

Correct approach:

const promises = urls.map(url => fetch(url).then(res => res.json()));
const data = await Promise.all(promises);

Root cause:

Using await inside loops runs requests one by one instead of in parallel.

#3 Ignoring dependencies between data fetches leads to incorrect data or errors.

Wrong approach:

const [user, posts] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch(`/api/posts?userId=${user.id}`).then(r => r.json())
]);

Correct approach:

const user = await fetch('/api/user').then(r => r.json());
const posts = await fetch(`/api/posts?userId=${user.id}`).then(r => r.json());

Root cause:

Trying to fetch dependent data in parallel without waiting for required values.

Key Takeaways

Parallel data fetching runs multiple requests at the same time, reducing total wait time and speeding up page loads.

Promise.all is the main tool for parallel fetching but fails entirely if any request fails, so error handling is crucial.

Next.js server components and React concurrency enable powerful streaming and progressive rendering with parallel fetching.

Misusing parallel fetching, like ignoring dependencies or errors, can cause bugs and slowdowns.

Combining parallel fetching with caching and Suspense creates smooth, fast, and resilient web applications.

Practice

1. What is the main benefit of using the Parallel data fetching pattern in Next.js?

easy

A. It delays fetching data until the user clicks a button.

B. It fetches multiple data sources at the same time to reduce loading time.

C. It fetches data one after another to ensure order.

D. It caches data permanently on the server.

Solution

1. Step 1: Understand parallel fetching concept

   Parallel fetching means requesting multiple data sources simultaneously rather than waiting for one to finish before starting the next.

2. Step 2: Identify the benefit in Next.js context

   Fetching data in parallel reduces total wait time, improving page load speed and user experience.

3. Final Answer:

   It fetches multiple data sources at the same time to reduce loading time. -> Option B

4. Quick Check:

   Parallel fetching = faster loading [OK]

Hint: Parallel means multiple fetches run together, not one by one [OK]

Common Mistakes:

• Thinking parallel means sequential fetching
• Confusing caching with parallel fetching
• Assuming parallel fetching waits for user action

2. Which of the following is the correct syntax to fetch two APIs in parallel using Next.js with Promise.all?

easy

A. const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]);

B. const data1 = await fetch(url1); const data2 = await fetch(url2);

C. const data1 = fetch(url1).then(); const data2 = fetch(url2).then();

D. const data1 = Promise.all(fetch(url1)); const data2 = Promise.all(fetch(url2));

Solution

1. Step 1: Recognize correct Promise.all usage

   Promise.all takes an array of promises and returns a single promise that resolves when all have resolved.

2. Step 2: Match syntax with parallel fetch

   Using await Promise.all([fetch(url1), fetch(url2)]) runs both fetches at the same time and waits for both results.

3. Final Answer:

   const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]); -> Option A

4. Quick Check:

   Promise.all with array = parallel fetch [OK]

Hint: Use await Promise.all with an array of fetch calls [OK]

Common Mistakes:

• Awaiting fetch calls one after another (sequential)
• Using Promise.all incorrectly on single fetch
• Not destructuring the array result

3. Given this Next.js code snippet, what will be logged to the console?

async function fetchData() {
  const [res1, res2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);
  console.log(res1.ok, res2.ok);
}
fetchData();

medium

A. [false, false] always because Promise.all fails

B. SyntaxError because Promise.all cannot destructure

C. [true, false] if first fetch succeeds and second fails

D. [true, true] if both fetches succeed

Solution

1. Step 1: Understand Promise.all behavior

   Promise.all resolves only if all promises succeed; otherwise, it rejects.

2. Step 2: Analyze console.log output

   If both fetches succeed, res1.ok and res2.ok will be true, so console logs [true, true].

3. Final Answer:

   [true, true] if both fetches succeed -> Option D

4. Quick Check:

   Promise.all success = all true [OK]

Hint: Promise.all resolves only if all fetches succeed [OK]

Common Mistakes:

• Assuming Promise.all returns false on failure instead of rejecting
• Thinking destructuring causes syntax error
• Confusing fetch response with data content

4. Identify the error in this Next.js parallel fetching code:

async function getData() {
  const data1 = fetch('/api/data1');
  const data2 = fetch('/api/data2');
  const results = await Promise.all(data1, data2);
  return results;
}

medium

A. You cannot use Promise.all with fetch in Next.js.

B. fetch calls must be awaited before Promise.all.

C. Promise.all expects an array, but data1 and data2 are passed as separate arguments.

D. The function should not be async.

Solution

1. Step 1: Check Promise.all argument

   Promise.all requires a single array of promises, but here two promises are passed as separate arguments.

2. Step 2: Correct usage

   It should be Promise.all([data1, data2]) to run fetches in parallel correctly.

3. Final Answer:

   Promise.all expects an array, but data1 and data2 are passed as separate arguments. -> Option C

4. Quick Check:

   Promise.all needs array argument [OK]

Hint: Always pass an array to Promise.all, not separate arguments [OK]

Common Mistakes:

• Passing multiple arguments instead of an array to Promise.all
• Awaiting fetch before Promise.all (sequential fetch)
• Misunderstanding async function requirements

5. You want to fetch user info and user posts in parallel in Next.js, but only display posts if user info fetch succeeds. Which pattern correctly handles this?

hard

A. Fetch user info first, then fetch posts only if user info fetch succeeds.

B. Use Promise.all to fetch both, then check user info before rendering posts.

C. Fetch posts first, then fetch user info regardless of posts result.

D. Fetch both sequentially without checking results.

Solution

1. Step 1: Understand dependency between data

   Posts depend on user info, so user info must be fetched and verified first.

2. Step 2: Choose correct fetching order

   Fetch user info first; if successful, then fetch posts. This avoids unnecessary posts fetch if user info fails.

3. Final Answer:

   Fetch user info first, then fetch posts only if user info fetch succeeds. -> Option A

4. Quick Check:

   Dependent fetches require sequential order [OK]

Hint: Fetch dependent data sequentially, independent data in parallel [OK]

Common Mistakes:

• Fetching dependent data in parallel without checks
• Ignoring fetch failure conditions
• Fetching unnecessary data causing wasted resources