Sequential data fetching in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data sequentially inside a React Server Component.

NextJS

export default async function Page() {
  const data1 = await fetch('/api/data1').then(res => res.json());
  const data2 = await [1]('/api/data2').then(res => res.json());
  return <div>{data1.title} - {data2.title}</div>;
}

Drag options to blanks, or click blank then click option'

Afetch

Baxios

CgetServerSideProps

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side hooks like useEffect in Server Components.

Using axios without importing or in Server Components.

The fetch function is used to get data sequentially in Next.js Server Components. Here, await fetch ensures the second fetch waits for the first.

2fill in blank

medium

Complete the code to fetch two APIs one after another and combine their results.

NextJS

export default async function Page() {
  const res1 = await fetch('/api/user');
  const user = await res1.json();
  const res2 = await fetch(`/api/posts?userId=${user.id}`);
  const posts = await [1].json();
  return <main>{user.name} has {posts.length} posts.</main>;
}

Drag options to blanks, or click blank then click option'

Ares1

Buser

Cres2

Dposts

Attempts:

3 left

💡 Hint

Common Mistakes

Calling .json() on the wrong variable.

Trying to parse JSON before awaiting the fetch.

After fetching res2, you call res2.json() to parse the posts data.

3fill in blank

hard

Fix the error in the code to fetch data sequentially and render it.

NextJS

export default async function Page() {
  const data1 = await fetch('/api/data1').then(res => res.json());
  const data2 = [1] fetch('/api/data2').then(res => res.json());
  return <div>{data1.name} and {data2.name}</div>;
}

Drag options to blanks, or click blank then click option'

Aawait

Basync

Cthen

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to await asynchronous fetch calls.

Trying to access properties on a Promise.

The second fetch must be awaited to get the resolved data before rendering.

4fill in blank

hard

Fill both blanks to create a sequential fetch and parse JSON for two APIs.

NextJS

export default async function Page() {
  const response1 = await fetch('/api/info');
  const info = await response1[1]();
  const response2 = await fetch('/api/details');
  const details = await response2[2]();
  return <section>{info.title} - {details.description}</section>;
}

Drag options to blanks, or click blank then click option'

A.json

B.text

C.blob

D.arrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using .text() or .blob() instead of .json() when expecting JSON data.

Forgetting to await the parsing method.

Use .json() to parse the fetch response as JSON data for both responses.

5fill in blank

hard

Fill all three blanks to fetch user, then posts, then comments sequentially and parse JSON.

NextJS

export default async function Page() {
  const userRes = await fetch('/api/user');
  const user = await userRes[1]();
  const postsRes = await fetch(`/api/posts?userId=${user.id}`);
  const posts = await postsRes[2]();
  const commentsRes = await fetch(`/api/comments?postId=${posts[0].id}`);
  const comments = await commentsRes[3]();
  return <article>{user.name} has {posts.length} posts and {comments.length} comments on the first post.</article>;
}

Drag options to blanks, or click blank then click option'

A.json

B.text

C.blob

D.arrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using different parsing methods inconsistently.

Not awaiting the parsing methods.

All fetch responses must be parsed as JSON using .json() to access the data.