Server component restrictions in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens if a Server Component tries to use useState?

Consider a Next.js Server Component that calls the React hook useState. What will happen when this component is rendered?

NextJS

import React, { useState } from 'react';

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

A The component will throw a runtime error because useState is not allowed in Server Components.

B The component will render normally and update state on user interaction.

C The component will render but the state will never update.

D The component will compile but cause a hydration mismatch warning in the browser.

💡 Hint

Remember that Server Components run only on the server and cannot use client-only hooks.

Server Components in Next.js cannot use React hooks like useState because these hooks require client-side interactivity. Attempting to use them causes a runtime error.

📝 Syntax

intermediate

Which import statement is invalid in a Next.js Server Component?

Identify the import statement that will cause an error when used inside a Next.js Server Component.

A import fs from 'fs';

B import { useEffect } from 'react';

C import fetch from 'node-fetch';

D import path from 'path';

💡 Hint

Think about which imports are client-only React hooks.

The useEffect hook is a client-side React hook and cannot be used or imported in Server Components. The other imports are Node.js or server-safe modules.

🔧 Debug

advanced

Why does this Server Component cause a hydration mismatch?

Given this Server Component code, why does the browser show a hydration mismatch warning?

NextJS

export default function ServerComp() {
  const date = new Date().toLocaleTimeString();
  return <div>{date}</div>;
}

A Because Server Components cannot return JSX elements.

B Because the component uses a client hook inside a Server Component.

C Because the date string changes on each render causing server and client output to differ.

D Because the component is missing a key prop on the root element.

💡 Hint

Think about what changes between server render and client hydration.

The Server Component renders the current time string at build or request time. When React hydrates on the client, the time is different, causing a mismatch warning.

🧠 Conceptual

advanced

Which of these is NOT allowed inside a Next.js Server Component?

Select the operation that is disallowed inside a Next.js Server Component.

A Using React hooks like useState or useEffect.

B Fetching data from an external API using fetch.

C Using React Context to share state between components.

D Reading files from the local filesystem using Node.js APIs.

💡 Hint

Recall which React features are client-only.

React hooks like useState and useEffect require client-side interactivity and are disallowed in Server Components. The other operations are allowed.

❓ state_output

expert

What is the value of count after rendering this Server Component?

Analyze the following Server Component code and determine the value of count when rendered.

NextJS

let count = 0;

export default function ServerComp() {
  count += 1;
  return <div>{count}</div>;
}

A count will always be 0 because Server Components cannot modify variables.

B count will cause a runtime error because of variable mutation in Server Components.

C count will be 1 on every render because Server Components run fresh each time.

D count will increment on every request and keep increasing indefinitely.

💡 Hint

Server Components' modules are cached like any Node.js module. Top-level state persists across requests.

The module containing the Server Component is cached on the server. Top-level variables like count persist across requests. Each request invokes the component function, incrementing count and rendering the updated value.