Parallel data fetching pattern in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js component using parallel data fetching?

Consider this Next.js component that fetches two APIs in parallel using Promise.all. What will it render?

NextJS

import React from 'react';

export default async function Page() {
  const [postsRes, usersRes] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/posts'),
    fetch('https://jsonplaceholder.typicode.com/users')
  ]);
  const posts = await postsRes.json();
  const users = await usersRes.json();

  return (
    <main>
      <h1>Posts count: {posts.length}</h1>
      <h2>First user name: {users[0].name}</h2>
    </main>
  );
}

A SyntaxError due to invalid await usage in component

B <main><h1>Posts count: 0</h1><h2>First user name: undefined</h2></main>

C <main><h1>Posts count: 100</h1><h2>First user name: Leanne Graham</h2></main>

D Runtime error: Cannot read property 'length' of undefined

💡 Hint

Think about how Promise.all helps fetch data simultaneously and what the API returns.

The component fetches posts and users in parallel, waits for both, then parses JSON. The posts API returns 100 posts, and the users API returns a list where the first user's name is 'Leanne Graham'. So the rendered output shows these values.

📝 Syntax

intermediate

Which option correctly uses parallel data fetching in a Next.js Server Component?

Choose the code snippet that correctly fetches two APIs in parallel inside a Next.js Server Component.

A const [data1, data2] = await Promise.all([fetch('/api/data1'), fetch('/api/data2')]);

B const data1 = fetch('/api/data1').then(res => res.json()); const data2 = fetch('/api/data2').then(res => res.json());

C const data1 = fetch('/api/data1'); const data2 = fetch('/api/data2'); await data1; await data2;

D const data1 = await fetch('/api/data1'); const data2 = await fetch('/api/data2');

💡 Hint

Look for the option that starts both fetches at the same time and waits for both to finish.

Option A uses Promise.all to start both fetches simultaneously and waits for both to complete, which is the correct parallel fetching pattern.

🔧 Debug

advanced

Why does this parallel fetch code cause a runtime error in Next.js?

Examine this code snippet inside a Next.js Server Component. Why does it cause a runtime error?

NextJS

const [posts, users] = await Promise.all([
  fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()),
  fetch('https://jsonplaceholder.typicode.com/users')
]);

console.log(users.length);

A Because the second fetch response is not converted to JSON before accessing length

B Because Promise.all does not support mixed promises and values

C Because fetch cannot be used inside Server Components

D Because the first fetch is missing await before then

💡 Hint

Check how the responses are handled before accessing properties like length.

The second fetch returns a Response object, not JSON data. Accessing users.length causes an error because users is not an array but a Response. The fix is to call res.json() on the second fetch as well.

❓ state_output

advanced

What is the state output after this React component fetches data in parallel?

Given this React functional component using useEffect and Promise.all, what will be the final state of data?

NextJS

import React, { useState, useEffect } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    Promise.all([
      fetch('/api/a').then(res => res.json()),
      fetch('/api/b').then(res => res.json())
    ]).then(([a, b]) => {
      setData({ a, b });
    });
  }, []);

  return <pre>{JSON.stringify(data)}</pre>;
}

A An error because useEffect cannot use async functions

B {"a": {...}, "b": {...}} (objects from both APIs)

C null (state never updates)

D {"a": undefined, "b": undefined}

💡 Hint

Consider how Promise.all and then update state inside useEffect.

The component fetches both APIs in parallel, waits for both JSON responses, then sets the state with both results. The state data becomes an object with keys a and b holding the fetched data.

🧠 Conceptual

expert

Why is parallel data fetching preferred over sequential fetching in Next.js Server Components?

Choose the best explanation for why parallel data fetching is recommended in Next.js Server Components.

A Sequential fetching is deprecated in Next.js and will cause build errors.

B Parallel fetching ensures data is fetched in a specific order required by Next.js routing.

C Parallel fetching caches all data automatically, so no manual caching is needed.

D Parallel fetching reduces total waiting time by starting all requests simultaneously, improving performance.

💡 Hint

Think about how waiting for multiple requests one after another affects load time.

Parallel fetching starts all requests at once, so the total wait time is roughly the longest single request, not the sum of all. This improves page load speed and user experience.