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.

Practice

1. What is the main purpose of a Next.js server component?

easy

A. To manage browser events like clicks and form submissions

B. To handle client-side user interactions and state updates

C. To run code only on the server and send pre-rendered HTML to the client

D. To load CSS styles dynamically on the client

Solution

1. Step 1: Understand server component role

   Server components run only on the server and generate HTML before sending it to the browser.

2. Step 2: Compare with client components

   Client components handle interactions and state, but server components focus on data fetching and static rendering.

3. Final Answer:

   To run code only on the server and send pre-rendered HTML to the client -> Option C

4. Quick Check:

   Server components = server-only rendering [OK]

Hint: Server components run on server, not browser [OK]

Common Mistakes:

• Confusing server components with client components
• Thinking server components handle user events
• Assuming server components run in the browser

2. Which of the following is the correct way to define a Next.js server component?

easy

A. export default async function MyComponent() { return Hello from server }

B. 'use client';\nexport const runtime = 'edge'; export default function MyComponent() { return Hello }

C. 'use client';\nexport const dynamic = 'force-dynamic'; export default function MyComponent() { return Hello }

D. 'use client';\nexport default function MyComponent() { return Hello } // runs on client

Solution

1. Step 1: Identify server component syntax

   Server components can be async functions that fetch data and return JSX.

2. Step 2: Check options for server component traits

   export default async function MyComponent() { return <div>Hello from server</div> } exports an async function returning JSX, which is valid for server components.

3. Final Answer:

   export default async function MyComponent() { return <div>Hello from server</div> } -> Option A

4. Quick Check:

   Async function export = server component [OK]

Hint: Async function export usually means server component [OK]

Common Mistakes:

• Assuming all exported functions run on client
• Confusing runtime or dynamic exports with server component definition
• Not using async when fetching data in server components

3. Given this Next.js server component code, what will be rendered in the browser?

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

medium

A. Client-side loading spinner until data arrives

B. An error because fetch is not allowed in server components

C. Empty div because data is undefined

D. <div>Count: 42</div> (assuming API returns { count: 42 })

Solution

1. Step 1: Understand server component data fetching

   Server components can fetch data using await and render the result directly.

2. Step 2: Predict output with given API response

   If API returns { count: 42 }, the component renders <div>Count: 42</div> as static HTML.

3. Final Answer:

   <div>Count: 42</div> (assuming API returns { count: 42 }) -> Option D

4. Quick Check:

   Server fetch + await = pre-rendered data [OK]

Hint: Server components fetch data before rendering [OK]

Common Mistakes:

• Thinking fetch is disallowed in server components
• Expecting client-side loading states in server components
• Assuming data is undefined without awaiting fetch

4. Identify the error in this Next.js server component code:

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

medium

A. Missing async/await causes data to be a Promise, not resolved value

B. fetch cannot be used inside server components

C. JSX syntax error in return statement

D. Using relative URL in fetch is not allowed on server

Solution

1. Step 1: Check fetch usage in server component

   fetch returns a Promise; without await, data is a Promise object.

2. Step 2: Understand JSX rendering with Promise

   JSX cannot render a Promise directly, causing incorrect output or error.

3. Final Answer:

   Missing async/await causes data to be a Promise, not resolved value -> Option A

4. Quick Check:

   Always await fetch in server components [OK]

Hint: Always await fetch to get data, not Promise [OK]

Common Mistakes:

• Forgetting async keyword on function
• Trying to render Promise instead of data
• Assuming fetch is disallowed in server components

5. How can you combine server components with client components in Next.js to fetch data securely and handle user interactions?

hard

A. Fetch data inside client component and send it back to server component via props

B. Use a server component to fetch data and pass it as props to a client component for interaction

C. Use only client components for both data fetching and interactions

D. Use server components to handle user events and client components to fetch data

Solution

1. Step 1: Understand server and client component roles

   Server components fetch data securely and prepare HTML; client components handle user events.

2. Step 2: Combine by passing data as props

   Server component fetches data, then passes it to client component which manages interactions.

3. Final Answer:

   Use a server component to fetch data and pass it as props to a client component for interaction -> Option B

4. Quick Check:

   Server fetch + client interaction = Use a server component to fetch data and pass it as props to a client component for interaction [OK]

Hint: Server fetches data, client handles UI events [OK]

Common Mistakes:

• Fetching data in client component only
• Trying to handle user events in server components
• Passing data from client to server component via props