Parallel data fetching in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from two APIs in parallel using Promise.all.

NextJS

export default async function Page() {
  const [posts, users] = await [1]([
    fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()),
    fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json())
  ])

  return (
    <main>
      <h1>Posts: {posts.length}</h1>
      <h1>Users: {users.length}</h1>
    </main>
  )
}

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

APromise.resolve

BPromise.all

CPromise.race

DPromise.any

Attempts:

3 left

💡 Hint

Common Mistakes

Using Promise.race which resolves as soon as one promise resolves.

Not awaiting the promises causing unresolved data.

Promise.all runs multiple promises in parallel and waits for all to complete, returning their results as an array.

2fill in blank

medium

Complete the code to fetch data from two APIs in parallel and destructure the JSON results.

NextJS

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

  const postsData = await posts.[1]()
  const usersData = await users.json()

  return (
    <main>
      <h1>Posts: {postsData.length}</h1>
      <h1>Users: {usersData.length}</h1>
    </main>
  )
}

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

AformData

Btext

Cblob

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns raw text instead of parsed JSON.

Forgetting to await the json() method.

The fetch response object has a json() method to parse the response body as JSON.

3fill in blank

hard

Fix the error in the code to fetch two APIs in parallel and parse their JSON responses.

NextJS

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

  return (
    <main>
      <h1>Posts: {posts.length}</h1>
      <h1>Users: {users.length}</h1>
    </main>
  )
}

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

Ajson

Bblob

Ctext

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causing data to be raw text.

Not awaiting the parsing method.

Both fetch responses must be parsed with json() to get the data arrays.

4fill in blank

hard

Fill both blanks to fetch two APIs in parallel and parse their JSON responses correctly.

NextJS

export default async function Page() {
  const [posts, users] = await Promise.[1]([
    fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.[2]()),
    fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json())
  ])

  return (
    <main>
      <h1>Posts: {posts.length}</h1>
      <h1>Users: {users.length}</h1>
    </main>
  )
}

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

Aall

Brace

Cjson

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using Promise.race which resolves too early.

Using text() instead of json() causing parsing errors.

Promise.all runs all promises in parallel; res.json() parses JSON from the response.

5fill in blank

hard

Fill all three blanks to fetch three APIs in parallel and parse their JSON responses correctly.

NextJS

export default async function Page() {
  const [posts, users, comments] = await Promise.[1]([
    fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.[2]()),
    fetch('https://jsonplaceholder.typicode.com/users').then(res => res.[3]()),
    fetch('https://jsonplaceholder.typicode.com/comments').then(res => res.json())
  ])

  return (
    <main>
      <h1>Posts: {posts.length}</h1>
      <h1>Users: {users.length}</h1>
      <h1>Comments: {comments.length}</h1>
    </main>
  )
}

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

Aall

Bjson

Ctext

Drace

Attempts:

3 left

💡 Hint

Common Mistakes

Using Promise.race which resolves too soon.

Using text() instead of json() causing wrong data format.

Use Promise.all to run all fetches in parallel and json() to parse each response as JSON.