Server component execution model in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js Server Component?

Consider this Next.js Server Component code. What will it render on the page?

NextJS

export default function Greeting() {
  const name = 'Alice';
  return <h1>Hello, {name}!</h1>;
}

A Error: name is undefined

B <h1>Hello, Alice!</h1>

C <h1>Hello, {name}!</h1>

D <h1>Hello!</h1>

💡 Hint

Server components run on the server and can use variables directly in JSX.

The component runs on the server, so the variable 'name' is available and rendered as 'Alice'.

❓ lifecycle

intermediate

When does a Next.js Server Component run?

At what point does a Next.js Server Component execute its code?

A On the server during the initial page request before sending HTML

B In the browser after the page loads

C Only when a user clicks a button

D After the client-side JavaScript finishes loading

💡 Hint

Think about where server components run compared to client components.

Server components run on the server during the initial request to generate HTML before sending it to the browser.

❓ state_output

advanced

What happens if you use useState in a Next.js Server Component?

Examine this code snippet. What will happen when this Server Component runs? export default function Counter() { const [count, setCount] = useState(0); return

{count}

; }

NextJS

export default function Counter() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

A <p>undefined</p> rendered

B <p>0</p> rendered successfully

C Runtime error: setCount is undefined

D SyntaxError: useState cannot be used in Server Components

💡 Hint

Remember which hooks are allowed in Server Components.

useState is a React hook that only works in Client Components, so using it in a Server Component causes a syntax error.

📝 Syntax

advanced

Which code correctly fetches data in a Next.js Server Component?

Choose the option that correctly fetches data inside a Server Component and renders it.

A

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

B

export default function Data() {
  fetch('https://api.example.com/data').then(res => res.json()).then(data => {
    return <pre>{JSON.stringify(data)}</pre>;
  });
}

C

export default function Data() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return <pre>{JSON.stringify(data)}</pre>;
}

D

export default async function Data() {
  const data = fetch('https://api.example.com/data').json();
  return <pre>{JSON.stringify(data)}</pre>;
}

💡 Hint

Server Components can be async and await fetch calls.

Option A correctly awaits the fetch and JSON parsing before rendering. Others misuse promises or methods.

🔧 Debug

expert

Why does this Server Component cause a hydration mismatch error?

This Server Component renders a random number: export default function Random() { const num = Math.random(); return

{num}

; } Why might this cause a hydration mismatch error in Next.js?

NextJS

export default function Random() {
  const num = Math.random();
  return <p>{num}</p>;
}

A Because Math.random() is not allowed in Server Components

B Because the component must be async to use Math.random()

C Because the server and client render different random numbers causing mismatch

D Because the component is missing a key prop

💡 Hint

Think about how server-rendered HTML and client hydration must match exactly.

The server renders one random number, but the client renders a different one during hydration, causing mismatch errors.