Parallel data fetching in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component?

Consider this Next.js component that fetches user and post data in parallel using Promise.all. What will it render?

NextJS

import React from 'react';

async function fetchUser() {
  return { name: 'Alice' };
}

async function fetchPosts() {
  return ['Post1', 'Post2'];
}

export default async function Page() {
  const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  return (
    <main>
      <h1>User: {user.name}</h1>
      <ul>
        {posts.map((post, i) => <li key={i}>{post}</li>)}
      </ul>
    </main>
  );
}

A <main><h1>User: undefined</h1><ul><li>Post1</li><li>Post2</li></ul></main>

B Runtime error: Cannot read property 'map' of undefined

C <main><h1>User: Alice</h1><ul></ul></main>

D <main><h1>User: Alice</h1><ul><li>Post1</li><li>Post2</li></ul></main>

💡 Hint

Think about what Promise.all returns and how the data is destructured.

The component uses Promise.all to fetch user and posts simultaneously. Both promises resolve correctly, so user.name is 'Alice' and posts is an array with two items. The component renders the user name and the list of posts.

📝 Syntax

intermediate

Which option correctly fetches data in parallel in a Next.js server component?

Choose the code snippet that correctly fetches data1 and data2 in parallel inside a Next.js server component.

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

B

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

C

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

D

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

💡 Hint

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

Option A uses Promise.all to run both fetches in parallel and waits for both to resolve. Option A runs fetches sequentially. Option A starts fetches but awaits them separately, losing parallelism. Option A does not await the promises properly.

🔧 Debug

advanced

Why does this parallel fetch code cause a runtime error?

Examine this Next.js server component code snippet. It tries to fetch two APIs in parallel but causes a runtime error. What is the cause?

NextJS

export default async function Page() {
  const data1 = fetch('/api/data1').then(res => res.json());
  const data2 = fetch('/api/data2').then(res => res.json());
  return (
    <main>
      <p>Data1: {data1.value}</p>
      <p>Data2: {data2.value}</p>
    </main>
  );
}

A data1 and data2 are promises, not resolved data, so accessing .value causes an error.

B fetch calls are missing await, causing a syntax error.

C The component must be a client component to use fetch.

D The API endpoints '/api/data1' and '/api/data2' do not exist, causing a 404 error.

💡 Hint

Check what fetch(...).then(...) returns and how it is used in JSX.

fetch(...).then(...) returns a promise. The component tries to access .value on the promise instead of the resolved data, causing a runtime error.

❓ state_output

advanced

What is the output of this React component using parallel data fetching with hooks?

Consider this React functional component that fetches two APIs in parallel using useEffect and Promise.all. What will it display after data loads?

NextJS

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

export default function DataDisplay() {
  const [data, setData] = useState({ user: null, posts: null });

  useEffect(() => {
    Promise.all([
      fetch('/api/user').then(res => res.json()),
      fetch('/api/posts').then(res => res.json())
    ]).then(([userData, postsData]) => {
      setData({ user: userData, posts: postsData });
    });
  }, []);

  if (!data.user || !data.posts) return <p>Loading...</p>;

  return (
    <div>
      <h2>{data.user.name}</h2>
      <ul>
        {data.posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

A <p>Loading...</p> forever because state never updates.

B <p>Loading...</p> initially, then user name and list of post titles after fetches complete.

C An error because <code>data.posts</code> is null when mapping.

D User name displayed but posts list is empty.

💡 Hint

Think about how useEffect and state updates work asynchronously.

The component shows 'Loading...' while data is null. After both fetches complete, state updates with user and posts data, causing a re-render that displays the user name and posts list.

🧠 Conceptual

expert

Why is parallel data fetching preferred over sequential fetching in Next.js server components?

Choose the best explanation for why fetching multiple data sources in parallel is better than fetching them one after another in Next.js server components.

A Sequential fetching allows better error handling and is preferred for reliability.

B Sequential fetching is always faster because it avoids network congestion.

C Parallel fetching reduces total wait time by running requests simultaneously, improving performance and user experience.

D Parallel fetching uses more memory and should be avoided to reduce server load.

💡 Hint

Think about how waiting for multiple tasks works in real life, like waiting in line versus doing tasks at the same time.

Parallel fetching sends multiple requests at once, so the total time is roughly the longest single request time, not the sum. This speeds up page rendering and improves user experience.