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.

Practice

1. What is the main advantage of fetching data inside Next.js server components?

easy

A. It requires no network requests at all.

B. Data is fetched before rendering, improving page speed and SEO.

C. It allows using React hooks like useState for data fetching.

D. Data fetching happens on the client side for faster UI updates.

Solution

1. Step 1: Understand server component data fetching

   Server components fetch data before rendering, so the page is ready with data when sent to the browser.

2. Step 2: Recognize benefits for speed and SEO

   This pre-rendering with data improves page load speed and helps search engines index content better.

3. Final Answer:

   Data is fetched before rendering, improving page speed and SEO. -> Option B

4. Quick Check:

   Server components fetch data early = D [OK]

Hint: Server components fetch data before render for speed and SEO [OK]

Common Mistakes:

• Thinking data fetching happens on client side in server components
• Confusing server components with client components
• Believing no network requests are needed

2. Which of the following is the correct way to fetch data inside a Next.js server component?

easy

A. const data = fetch('https://api.example.com/data', { method: 'POST' });

B. const data = fetch('https://api.example.com/data').then(res => res.json());

C. useEffect(() => { fetch('https://api.example.com/data'); }, []);

D. const data = await fetch('https://api.example.com/data');

Solution

1. Step 1: Identify server component data fetching syntax

   Server components support top-level await, so you can directly use await fetch().

2. Step 2: Check each option

   const data = await fetch('https://api.example.com/data'); uses await fetch correctly. const data = fetch('https://api.example.com/data').then(res => res.json()); assigns a Promise to data without awaiting. useEffect(() => { fetch('https://api.example.com/data'); }, []); uses useEffect, which is client-side only. const data = fetch('https://api.example.com/data', { method: 'POST' }); uses POST without context, likely incorrect for simple fetch.

3. Final Answer:

   const data = await fetch('https://api.example.com/data'); -> Option D

4. Quick Check:

   Top-level await fetch in server components = A [OK]

Hint: Use top-level await fetch() in server components [OK]

Common Mistakes:

• Using useEffect inside server components
• Not using await with fetch
• Confusing client-side hooks with server code

3. Given this server component code, what will be rendered?

export default async function Page() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return <h1>Hello, {user.name}!</h1>;
}

medium

A. <h1>Hello, John!</h1>

B. Error: fetch not allowed in server components

C. <h1>Hello, undefined!</h1>

D. Loading spinner until data arrives

Solution

1. Step 1: Understand server component data fetching

   The fetch call waits for the API response, then parses JSON to get user data.

2. Step 2: Render with fetched data

   The component returns an h1 element greeting the user by name, assuming user.name is 'John'.

3. Final Answer:

   <h1>Hello, John!</h1> -> Option A

4. Quick Check:

   Server component fetch + render data = C [OK]

Hint: Server components await fetch, render data directly [OK]

Common Mistakes:

• Expecting client-side loading states in server components
• Assuming fetch is disallowed in server components
• Not awaiting fetch response before rendering

4. Identify the error in this Next.js server component fetching data:

export default function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>Data loaded</div>;
}

medium

A. Missing JSON parsing of fetch response.

B. fetch is not allowed in server components.

C. Cannot use await inside a non-async function.

D. Return statement must be inside useEffect.

Solution

1. Step 1: Check function declaration

   The function is not marked async but uses await, which is invalid syntax.

2. Step 2: Understand correct usage

   To use await, the function must be async. fetch is allowed in server components, and JSON parsing is optional depending on usage.

3. Final Answer:

   Cannot use await inside a non-async function. -> Option C

4. Quick Check:

   await requires async function = A [OK]

Hint: Mark function async to use await inside it [OK]

Common Mistakes:

• Forgetting async keyword on server component
• Thinking fetch is disallowed in server components
• Misusing client hooks like useEffect in server components

5. You want to fetch user data and posts in a Next.js server component and display the user's name with the number of posts. Which code correctly fetches both and renders the result?

export default async function Page() {
  const userRes = await fetch('https://api.example.com/user');
  const postsRes = await fetch('https://api.example.com/posts');
  const user = await userRes.json();
  const posts = await postsRes.json();
  return <div>{user.name} has {posts.length} posts.</div>;
}

hard

A. Correctly fetches both and renders user name with posts count.

B. fetch calls must be inside useEffect for server components.

C. Cannot fetch multiple resources in one server component.

D. Must combine fetch calls with Promise.all to work.

Solution

1. Step 1: Analyze fetch calls in server component

   Server components support multiple await fetch calls sequentially as shown.

2. Step 2: Confirm rendering logic

   The component renders user.name and posts.length correctly after awaiting JSON parsing.

3. Final Answer:

   Correctly fetches both and renders user name with posts count. -> Option A

4. Quick Check:

   Multiple awaits in server component allowed = B [OK]

Hint: Await multiple fetches sequentially in async server component [OK]

Common Mistakes:

• Thinking useEffect is needed in server components
• Believing multiple fetch calls are disallowed
• Assuming Promise.all is required for correctness