Data fetching in server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this server component fetching data?

Consider this Next.js server component fetching user data. What will it render?

NextJS

import React from 'react';

async function getUser() {
  return { name: 'Alice', age: 30 };
}

export default async function User() {
  const user = await getUser();
  return <div>{`Name: ${user.name}, Age: ${user.age}`}</div>;
}

A <div>Name: Alice, Age: 30</div>

B <div>Name: undefined, Age: undefined</div>

C Error: Cannot use await in server component

D <div>Name: , Age: 0</div>

💡 Hint

Server components can use async/await directly for data fetching.

Server components in Next.js can fetch data using async functions and await. The getUser function returns an object with name and age, which is rendered correctly.

📝 Syntax

intermediate

Which option correctly fetches data in a Next.js server component?

Identify the correct way to fetch data inside a Next.js server component.

A

export default function Page() {
  const data = fetch('/api/data').then(res => res.json());
  return <div>{data.title}</div>;
}

B

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

C

export default function Page() {
  const data = useEffect(() => {
    fetch('/api/data').then(res => res.json());
  });
  return <div>{data.title}</div>;
}

D

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

💡 Hint

Server components support async/await and fetch API directly.

Option D correctly uses async function, awaits fetch and json parsing before rendering. Option D does not await fetch, so data is a Promise. Option D uses useEffect which is client-only. Option D calls .json() on Promise without await causing error.

🔧 Debug

advanced

Why does this server component cause a runtime error?

Examine this Next.js server component code. Why does it throw an error at runtime?

NextJS

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

A ReferenceError: data is not defined

B TypeError: fetch is not defined

C SyntaxError: 'await' is only valid in async functions

D No error, renders data.name correctly

💡 Hint

Check if the function is declared async when using await.

The function is not declared async but uses await, causing a SyntaxError.

❓ state_output

advanced

What is the rendered output of this server component with conditional data fetching?

Given this Next.js server component, what will it render?

NextJS

async function getData(flag) {
  if (flag) {
    return { message: 'Flag is true' };
  } else {
    return null;
  }
}

export default async function Page() {
  const data = await getData(false);
  return <div>{data?.message ?? 'No data available'}</div>;
}

A <div>Flag is true</div>

B <div>No data available</div>

C <div>undefined</div>

D Error: Cannot read property 'message' of null

💡 Hint

Optional chaining and nullish coalescing handle null data safely.

getData returns null, so data is null. data?.message is undefined, so fallback 'No data available' is rendered.

🧠 Conceptual

expert

Which statement about data fetching in Next.js server components is TRUE?

Select the correct statement regarding data fetching in Next.js server components.

A Server components can fetch data directly using async/await and the fetch API without client-side JavaScript.

B Data fetching in server components happens at build time only and cannot be dynamic.

C Server components can use React hooks like useState and useEffect for data fetching.

D Server components must always fetch data via client components to avoid blocking rendering.

💡 Hint

Think about how server components handle data fetching compared to client components.

Server components run on the server and can use async/await and fetch directly. They do not use React hooks like useState or useEffect, which are client-side only. Data fetching can be dynamic at request time. They do not require client components for data fetching.