Parallel data fetching in NextJS - Mini Project: Build & Apply

Parallel data fetching

📖 Scenario: You are building a Next.js app that shows user details and their posts on the same page. To make the page load faster, you want to fetch user info and posts at the same time, not one after the other.

🎯 Goal: Create a Next.js page component that fetches user data and posts data in parallel using Promise.all inside getServerSideProps. Then display the user's name and a list of their post titles.

📋 What You'll Learn

Use getServerSideProps to fetch data on the server side

Fetch user data from https://jsonplaceholder.typicode.com/users/1

Fetch posts data from https://jsonplaceholder.typicode.com/posts?userId=1

Fetch both endpoints in parallel using Promise.all

Render the user's name in an <h1> tag

Render the post titles in an unordered list <ul> with each title in a <li>

Use functional React component syntax

💡 Why This Matters

🌍 Real World

Fetching multiple API endpoints in parallel is common in real apps to improve performance and user experience by loading data faster.

💼 Career

Understanding parallel data fetching and server-side rendering is essential for building efficient Next.js applications used in professional web development.

1

Setup basic Next.js page and fetch user data

Create a Next.js page component called UserPage. Inside getServerSideProps, fetch user data from https://jsonplaceholder.typicode.com/users/1 using fetch. Return the user data as a prop named user. Render the user's name inside an <h1> tag in the component.

NextJS

export default function UserPage({ user }) {
  return (
    
      {/* Render user name here */}
    
  )
}

export async function getServerSideProps() {
  // Fetch user data here
  
  // Your code here
}

Hint

Use await fetch(url) and then await res.json() to get the user data.

2

Add posts data fetching setup

Inside getServerSideProps, add a fetch call to get posts data from https://jsonplaceholder.typicode.com/posts?userId=1. Store the result in a variable called posts after converting to JSON. Return posts as a prop alongside user. In the component, prepare to render posts but do not add the list yet.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      {/* Prepare to render posts here */}
    
  )
}

export async function getServerSideProps() {
  const resUser = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await resUser.json();
  // Fetch posts data here
  
  // Your code here
  return { props: { user, posts } };
}

Hint

Use await fetch again for posts and convert to JSON.

3

Fetch user and posts data in parallel

Modify getServerSideProps to fetch user and posts data in parallel using Promise.all. Use Promise.all with an array of two fetch calls. Await both responses, then convert each to JSON. Assign the results to user and posts variables respectively. Return both as props.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      {/* Posts will be rendered here later */}
    
  )
}

export async function getServerSideProps() {
  // Fetch user and posts in parallel
  
  // Your code here
  return { props: { user, posts } };
}

Hint

Use const [resUser, resPosts] = await Promise.all([...]) to fetch both URLs at once.

4

Render the list of post titles

In the UserPage component, below the user's name, render an unordered list <ul>. Inside it, use posts.map to create a list item <li> for each post's title. Make sure each <li> has a unique key using the post's id.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      
        {/* Render post titles here */}
      
    
  )
}

export async function getServerSideProps() {
  const [resUser, resPosts] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1'),
    fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
  ]);
  const user = await resUser.json();
  const posts = await resPosts.json();
  return { props: { user, posts } };
}

Hint

Use posts.map(post => <li key={post.id}>{post.title}</li>) inside the <ul>.

Practice

1. What is the main benefit of using Promise.all for data fetching in Next.js?

easy

A. It fetches multiple data sources at the same time, reducing total wait time.

B. It fetches data sequentially to avoid race conditions.

C. It caches data automatically for offline use.

D. It delays fetching until the user clicks a button.

Solution

1. Step 1: Understand Promise.all behavior

   Promise.all runs multiple promises in parallel and waits for all to finish.

2. Step 2: Relate to data fetching speed

   Fetching multiple data sources at once reduces total waiting time compared to sequential fetching.

3. Final Answer:

   It fetches multiple data sources at the same time, reducing total wait time. -> Option A

4. Quick Check:

   Parallel fetching = faster load [OK]

Hint: Remember: parallel means 'at the same time' [OK]

Common Mistakes:

• Thinking Promise.all fetches sequentially
• Confusing caching with parallel fetching
• Assuming it delays fetching until user action

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

easy

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

B. const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]);

C. const res1 = await fetch(url1); const res2 = await fetch(url2);

D. const res1 = fetch(url1).then(fetch(url2));

Solution

1. Step 1: Check Promise.all argument format

   Promise.all expects an array of promises, so the fetch calls must be inside an array.

2. Step 2: Identify correct syntax

   const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]); correctly uses an array: Promise.all([fetch(url1), fetch(url2)]). const [res1, res2] = await Promise.all(fetch(url1), fetch(url2)); misses the array brackets.

3. Final Answer:

   const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]); -> Option B

4. Quick Check:

   Array of promises = correct syntax [OK]

Hint: Always wrap promises in an array for Promise.all [OK]

Common Mistakes:

• Forgetting the array brackets around promises
• Using sequential awaits instead of Promise.all
• Chaining fetch calls incorrectly

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

async function fetchData() {
  const [userRes, postsRes] = await Promise.all([
    fetch('https://api.example.com/user'),
    fetch('https://api.example.com/posts')
  ]);
  console.log(userRes.status, postsRes.status);
}
fetchData();

medium

A. 200 200

B. undefined undefined

C. Promise Promise

D. Error: fetch is not defined

Solution

1. Step 1: Understand what fetch returns

   Each fetch returns a Response object with a status property indicating HTTP status.

2. Step 2: Analyze Promise.all result

   Promise.all waits for both fetches and returns an array of Response objects. Logging userRes.status and postsRes.status prints their HTTP status codes.

3. Final Answer:

   200 200 -> Option A

4. Quick Check:

   Response.status = 200 if successful [OK]

Hint: fetch returns Response objects with status property [OK]

Common Mistakes:

• Expecting fetch to return JSON directly
• Logging promises instead of awaited results
• Confusing undefined with Response properties

4. What is wrong with this Next.js code that tries to fetch two APIs in parallel?

async function getData() {
  const res1 = fetch('https://api.example.com/data1');
  const res2 = fetch('https://api.example.com/data2');
  const data1 = await res1.json();
  const data2 = await res2.json();
  return { data1, data2 };
}

medium

A. Nothing is wrong; this code fetches data correctly.

B. The fetch calls are not awaited in parallel, causing sequential fetching.

C. The function should use Promise.all to fetch in parallel.

D. You cannot call json() on a promise; you must await the fetch first.

Solution

1. Step 1: Identify the type of res1 and res2

   Both res1 and res2 are promises from fetch, not Response objects yet.

2. Step 2: Understand json() usage

   You must await the fetch promise to get the Response object before calling json(). Calling json() directly on a promise causes an error.

3. Final Answer:

   You cannot call json() on a promise; you must await the fetch first. -> Option D

4. Quick Check:

   Await fetch before json() [OK]

Hint: Always await fetch before calling json() [OK]

Common Mistakes:

• Calling json() on a fetch promise without awaiting
• Assuming fetch returns JSON directly
• Not using Promise.all for parallelism

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 approach correctly handles this?

hard

A. Use Promise.all for both fetches and check user info response before rendering posts.

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

C. Use Promise.allSettled to fetch both, then conditionally render posts if user info succeeded.

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

Solution

1. Step 1: Understand requirement for conditional rendering

   Posts should display only if user info fetch succeeds, so we need to know each fetch's success independently.

2. Step 2: Choose correct parallel fetching method

   Promise.all fails fast if any promise rejects, so it can't handle partial success. Promise.allSettled waits for all promises and reports each result, allowing conditional logic.

3. Step 3: Apply conditional rendering logic

   After Promise.allSettled, check user info status; if successful, render posts, else skip posts.

4. Final Answer:

   Use Promise.allSettled to fetch both, then conditionally render posts if user info succeeded. -> Option C

5. Quick Check:

   Conditional render needs allSettled [OK]

Hint: Use allSettled to handle partial success in parallel fetches [OK]

Common Mistakes:

• Using Promise.all which fails on first error
• Fetching posts before confirming user info success
• Not handling fetch failures gracefully