What can run in server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What output does this Server Component produce?

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

NextJS

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

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

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

C Error: Cannot use await in Server Component

D <h1>Hello, undefined!</h1>

💡 Hint

Server Components can use async/await to fetch data before rendering.

Server Components can run async code and resolve promises before rendering. Here, the awaited name 'Alice' is inserted into the output.

📝 Syntax

intermediate

Which code snippet is valid inside a Next.js Server Component?

Select the code snippet that is valid and will not cause a syntax or runtime error in a Server Component.

A const data = useState('hello'); return <p>{data}</p>;

B const data = fetch('/api/data').then(res => res.json()); return <p>{data}</p>;

C const fs = require('fs'); const data = fs.readFileSync('/file.txt', 'utf8'); return <p>{data}</p>;

D import fs from 'fs'; const data = await fs.promises.readFile('/file.txt', 'utf8'); return <p>{data}</p>;

💡 Hint

Server Components support async/await and Node.js APIs but do not support hooks like useState.

Option D correctly uses import and await with fs.promises in a Server Component. Option D uses require which is not supported in ES modules. Option D does not await the promise, so data is a Promise object. Option D uses useState which is a Client Component hook and not allowed in Server Components.

🔧 Debug

advanced

Why does this Server Component cause a runtime error?

Analyze the code below. Why will this Server Component cause an error when rendering?

NextJS

import { useState } from 'react';

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

A useState is not allowed in Server Components and causes a runtime error.

B The count variable is not initialized causing a ReferenceError.

C The component is missing async keyword for Server Components.

D The onClick handler is missing parentheses causing a syntax error.

💡 Hint

Server Components cannot use React hooks that require client-side interactivity.

useState is a React hook that only works in Client Components. Using it in a Server Component causes a runtime error because Server Components do not support state or event handlers.

🧠 Conceptual

advanced

Which of these can run inside a Next.js Server Component?

Select the option that correctly describes what can run inside a Server Component.

A Event handlers like onClick and onChange for user interactions.

B Direct DOM manipulation and browser-only APIs like window or document.

C Async data fetching, Node.js APIs, and rendering JSX without client-side hooks.

D React hooks like useState and useEffect for managing state and lifecycle.

💡 Hint

Think about what runs on the server vs what runs in the browser.

Server Components run on the server and can use async/await, Node.js APIs, and render JSX. They cannot use client-side hooks or browser APIs or event handlers.

❓ state_output

expert

What is the output of this mixed Server and Client Component setup?

Given the code below, what will be rendered on the page?

NextJS

import ClientCounter from './ClientCounter';

export default async function Page() {
  const message = await Promise.resolve('Welcome');
  return (
    <>
      <h1>{message}</h1>
      <ClientCounter />
    </>
  );
}

// ClientCounter.jsx
'use client';
import { useState } from 'react';
export default function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A <h1>Welcome</h1> and a button showing 'Count: 0' that increments on click

B Error: Cannot use useState in Server Component

C <h1>Welcome</h1> and a static button showing 'Count: 0' with no interaction

D <h1>{message}</h1> and a button showing 'Count: 0'

💡 Hint

Server Components can render Client Components which handle state and events.

The Server Component renders the awaited message and includes the Client Component. The Client Component uses useState and event handlers, so the button is interactive and shows count starting at 0.