Sequential data fetching in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js component render?

Consider this Next.js Server Component that fetches two APIs sequentially. What will it render?

NextJS

import React from 'react';

async function fetchUser() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json();
}

async function fetchPosts(userId) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
  return res.json();
}

export default async function UserPosts() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);

  return (
    <main>
      <h1>{user.name}</h1>
      <ul>
        {posts.slice(0, 2).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

A Empty <main> because fetchUser returns undefined

B <main> with user name but empty list (no posts)

C <main> with user name and first 2 post titles listed

D Error: fetchPosts called before fetchUser resolves

💡 Hint

Think about the order of await calls and what data is available when rendering.

The component waits for fetchUser() to finish before calling fetchPosts(user.id). So the user data is available, and posts are fetched for that user. It renders the user name and the first two post titles.

❓ state_output

intermediate

What is the value of 'posts' after this code runs?

Given this Next.js Server Component code, what is the value of posts after execution?

NextJS

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

async function fetchPosts(userId) {
  if (userId !== 5) throw new Error('User not found');
  return ['Post A', 'Post B', 'Post C'];
}

export default async function Page() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  return null;
}

A Error thrown: User not found

B [] (empty array)

C undefined

D ['Post A', 'Post B', 'Post C']

💡 Hint

Check the user id returned and the condition inside fetchPosts.

The user id is 5, which matches the condition in fetchPosts. So it returns the array of posts successfully.

📝 Syntax

advanced

Which option causes a syntax error in this sequential fetch code?

Identify which option contains a syntax error in this Next.js sequential data fetching snippet.

NextJS

async function getData() {
  const user = await fetch('/api/user').then(res => res.json());
  const posts = await fetch(`/api/posts?userId=${user.id}`).then(res => res.json());
  return { user, posts };
}

A const user = await fetch('/api/user').then(res => res.json())

B const data = await fetch('/api/data').then(res => res.json()

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

D return { user, posts }

💡 Hint

Look carefully at parentheses and brackets in each line.

Option B is missing a closing parenthesis for the then call, causing a syntax error.

🔧 Debug

advanced

Why does this Next.js component fail to fetch posts correctly?

Examine this component. It fetches user data and then posts. Why does it fail to show posts?

NextJS

import React from 'react';

export default async function UserPosts() {
  const userPromise = fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json());
  const postsPromise = fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userPromise.id}`).then(res => res.json());

  const user = await userPromise;
  const posts = await postsPromise;

  return (
    <main>
      <h1>{user.name}</h1>
      <ul>
        {posts.slice(0, 2).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

A postsPromise uses userPromise.id before userPromise resolves, so userPromise.id is undefined

B fetch URLs are incorrect and cause 404 errors

C await is missing before fetch calls, so promises never resolve

D postsPromise is awaited before userPromise, causing race condition

💡 Hint

Check when userPromise.id is accessed relative to promise resolution.

The code tries to access userPromise.id before userPromise resolves, so userPromise.id is undefined. This causes the posts fetch URL to be incorrect.

🧠 Conceptual

expert

What is the main advantage of sequential data fetching in Next.js Server Components?

Choose the best explanation for why sequential data fetching is used in Next.js Server Components.

A It allows fetching dependent data step-by-step, ensuring later fetches use data from earlier ones

B It speeds up data fetching by running all requests in parallel

C It reduces server load by caching all fetches automatically

D It enables client-side rendering to happen faster

💡 Hint

Think about when you need data from one fetch to use in the next fetch.

Sequential fetching ensures that data needed from the first fetch is available before starting the second fetch, which is important when the second depends on the first.