Fetch in server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server component fetching data?

Consider this Next.js server component that fetches a list of users from an API and renders their names:

export default async function Users() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

What will this component render?

NextJS

export default async function Users() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

A <ul><li>undefined</li></ul>

B <ul></ul>

C Error: fetch is not defined

D <ul><li>Leanne Graham</li><li>Ervin Howell</li><li>Clementine Bauch</li>... (all 10 users)</ul>

💡 Hint

Think about what the fetch call returns and how the data is used in the component.

The fetch call retrieves the user data from the API. Since this is a server component, the fetch runs on the server, so it works as expected. The component renders a list of all user names inside <li> elements.

❓ lifecycle

intermediate

When does the fetch run in a Next.js server component?

Given a server component that fetches data using await fetch(), when does this fetch happen?

NextJS

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

A At build time only, never on client requests

B On every client request to the page or component

C Only once when the server starts

D Only when the user clicks a button

💡 Hint

Think about how server components behave on each request.

Server components run on the server for each client request, so the fetch runs every time the component is rendered on the server.

📝 Syntax

advanced

Which fetch usage in a server component causes a runtime error?

Identify which fetch usage will cause a runtime error in a Next.js server component.

NextJS

export default async function Example() {
  // Option A
  const resA = await fetch('/api/data');

  // Option B
  const resB = await fetch('https://api.example.com/data', { cache: 'no-store' });

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

  // Option D
  const resD = await fetch('https://api.example.com/data', { signal: new AbortController().signal });

  return <div>Check console</div>;
}

A fetch with method: 'POST' causes runtime error in server component

B fetch('/api/data') without full URL causes runtime error

C fetch with cache: 'no-store' works fine

D fetch with AbortController signal works fine

💡 Hint

Consider which HTTP methods are allowed in server component fetch calls.

In Next.js server components, fetch supports GET requests by default. Using POST method directly in fetch inside server components causes runtime errors because server components expect data fetching to be idempotent and cacheable.

🔧 Debug

advanced

Why does this server component fetch fail with 'TypeError: Failed to fetch'?

Look at this server component code:

export default async function Posts() {
  const res = await fetch('http://localhost:3000/api/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Why does it fail with TypeError: Failed to fetch when deployed?

NextJS

export default async function Posts() {
  const res = await fetch('http://localhost:3000/api/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

A API returns invalid JSON causing fetch to fail

B Missing await before fetch causes failure

C Using 'localhost' URL in fetch fails in deployed environment

D fetch requires HTTPS URL always

💡 Hint

Think about what 'localhost' means when deployed on a server.

When deployed, 'localhost' refers to the server itself, which may not have the API running or accessible. The fetch call should use the full public URL or relative path, not 'localhost'.

🧠 Conceptual

expert

What is the main benefit of using fetch in Next.js server components over client components?

Choose the best explanation for why fetching data in server components is preferred over client components in Next.js.

A Server components fetch data on the server, reducing client bundle size and improving SEO

B Client components fetch data faster because they run in the browser

C Server components fetch data only once at build time, so data is always static

D Client components can fetch data without any network delay

💡 Hint

Think about where the code runs and how it affects performance and SEO.

Fetching data in server components happens on the server, so the client receives fully rendered HTML. This reduces JavaScript sent to the client and improves SEO because content is available immediately.