Data fetching in server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from an API in a Next.js server component.

NextJS

export default async function Page() {
  const res = await fetch('[1]');
  const data = await res.json();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

A'https://api.example.com/data'

B'http://localhost:3000/api/data'

C'/api/data'

D'https://example.com/api'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a relative path without a base URL in server components.

Forgetting to await the fetch call.

The fetch URL must be a full API endpoint string. Here, 'https://api.example.com/data' is a valid external API URL.

2fill in blank

medium

Complete the code to ensure the fetch call does not cache the response.

NextJS

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: '[1]' });
  const data = await res.json();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

A'force-cache'

B'default'

C'no-store'

D'reload'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which caches the response.

Omitting the cache option, causing default caching.

Using 'no-store' disables caching and always fetches fresh data in Next.js server components.

3fill in blank

hard

Fix the error in the fetch call to correctly handle server component data fetching.

NextJS

export default async function Page() {
  const res = fetch('https://api.example.com/data');
  const data = await [1];
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

Ares.json()

Bawait res.json()

Cres.await.json()

Dawait res

Attempts:

3 left

💡 Hint

Common Mistakes

Not awaiting res.json(), causing data to be a promise.

Using incorrect syntax like res.await.json().

You must await the promise returned by res.json() to get the parsed data.

4fill in blank

hard

Fill both blanks to fetch data and handle errors in a Next.js server component.

NextJS

export default async function Page() {
  try {
    const res = await fetch('https://api.example.com/data', { [1] });
    if (!res.ok) throw new Error('Failed to fetch');
    const data = await res.[2]();
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
  } catch (error) {
    return <p>Error: {error.message}</p>;
  }
}

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

Acache: 'no-store'

Bcache: 'force-cache'

Cjson

Djson()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which caches data.

Calling res.json without parentheses.

Use 'cache: no-store' to avoid caching and call res.json() to parse the response.

5fill in blank

hard

Fill all three blanks to create a server component that fetches data, disables caching, and displays a loading message.

NextJS

import React from 'react';

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { [1] });
  if (!res.ok) throw new Error('Failed to fetch');
  const data = await res.[2]();

  return (
    <main>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <p aria-live="polite">[3]</p>
    </main>
  );
}

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

Acache: 'no-store'

Bjson

CLoading data...

Djson()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses on json() call.

Not disabling cache, causing stale data.

Missing aria-live attribute for loading message.

Set cache to 'no-store' to disable caching, call res.json() to parse JSON, and show a polite loading message for accessibility.