Async server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this async server component render?

Consider this Next.js async server component. What will it render on the page?

NextJS

import React from 'react';

async function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve('Hello from server!'), 100));
}

export default async function Greeting() {
  const message = await fetchData();
  return <div>{message}</div>;
}

A <div>Hello from server!</div>

B Component throws an error

C <div>undefined</div>

D <div>Promise {<pending>}</div>

💡 Hint

Remember that async server components can await promises before rendering.

The component awaits fetchData() which resolves to 'Hello from server!'. So it renders that string inside a div.

❓ lifecycle

intermediate

When does this async server component fetch data?

Given this async server component, when is fetchData called?

NextJS

async function fetchData() {
  console.log('Fetching data');
  return 'Data';
}

export default async function DataComponent() {
  const data = await fetchData();
  return <p>{data}</p>;
}

A Only once when the app starts in the browser

B At build time or on each server request before rendering

C Every time the user clicks on the component

D Only after the component mounts on the client

💡 Hint

Async server components run on the server before sending HTML.

Async server components run on the server either at build time or on each request, so fetchData is called then.

📝 Syntax

advanced

Which option correctly defines an async server component in Next.js?

Select the correct syntax for an async server component that fetches data and renders it.

A

export default async function MyComponent() {
  const data = await fetch('/api/data');
  return <div>{data.json()}</div>;
}

B

export default function MyComponent() {
  const data = await fetch('/api/data');
  return <div>{data}</div>;
}

C

export default function MyComponent() {
  const data = fetch('/api/data');
  return <div>{data}</div>;
}

D

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

💡 Hint

Remember to await fetch and then await the response.json() in async functions.

Option D correctly awaits fetch, then awaits res.json(), then renders the message property.

🔧 Debug

advanced

Why does this async server component cause a runtime error?

Identify the cause of the runtime error in this async server component.

NextJS

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

A Because fetch is not awaited, data is a Promise which cannot be rendered causing error

B Because fetch is awaited but response is not parsed as JSON

C Because the API URL is invalid

D Because async functions cannot return JSX directly

💡 Hint

Check if fetch is awaited before accessing its result.

fetch returns a Promise. Without await, data is a Promise object, which React cannot render causing runtime error.

🧠 Conceptual

expert

What is a key benefit of using async server components in Next.js?

Choose the most accurate benefit of async server components compared to client components.

A They automatically cache data on the client for offline use

B They run in the browser and improve client-side interactivity

C They allow fetching data on the server before sending HTML, improving performance and SEO

D They replace the need for API routes entirely

💡 Hint

Think about where async server components run and how that affects loading.

Async server components run on the server, so they can fetch data before sending HTML, which helps performance and SEO.