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.

Practice

1. Which of the following is NOT allowed inside a Next.js server component?

easy

A. Using window.alert() to show a popup

B. Using fetch to get data from an API

C. Accessing the file system with fs module

D. Rendering static HTML content

Solution

1. Step 1: Understand server component environment

   Server components run only on the server and do not have access to browser APIs like window.

2. Step 2: Identify browser-only features

   Using window.alert() requires a browser environment, so it is not allowed in server components.

3. Final Answer:

   Using window.alert() to show a popup -> Option A

4. Quick Check:

   Browser APIs forbidden in server components = B [OK]

Hint: Server components can't use browser-only APIs like window [OK]

Common Mistakes:

• Thinking fetch is a browser-only API
• Assuming file system access is disallowed
• Confusing client and server component roles

2. Which syntax correctly marks a component as a server component in Next.js?

easy

A. 'use server'; export default function MyComponent() { return Hello }

B. 'use client'; export default function MyComponent() { return Hello }

C. export default function MyComponent() { return Hello }

D. 'use client'; export const MyComponent = () => Hello

Solution

1. Step 1: Recall default component type

   By default, components in Next.js are server components unless marked otherwise.

2. Step 2: Identify client directive usage

   Adding 'use client' marks a component as client-side, so 'use client'; export default function MyComponent() { return <div>Hello</div> } is client, not server.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div> } -> Option C

4. Quick Check:

   Default is server component = A [OK]

Hint: No 'use client' means server component by default [OK]

Common Mistakes:

• Adding 'use server' which is not a valid directive
• Confusing arrow function export with client directive
• Assuming explicit 'use server' is required

3. What will happen if you try to use useState hook inside a Next.js server component?

medium

A. It will convert the component to a client component automatically

B. It will work normally and manage state on the server

C. It will silently ignore the state and render static content

D. It will cause a runtime error because hooks are client-only

Solution

1. Step 1: Understand hook restrictions in server components

   Hooks like useState require a browser environment and are only valid in client components.

2. Step 2: Identify behavior when used in server components

   Using useState in server components causes a runtime error because state management is not supported there.

3. Final Answer:

   It will cause a runtime error because hooks are client-only -> Option D

4. Quick Check:

   useState only works in client components = A [OK]

Hint: useState is client-only; server components error if used [OK]

Common Mistakes:

• Thinking useState works on server for pre-rendering
• Assuming server components can manage interactive state
• Believing server components auto-convert to client

4. You wrote this server component code but get an error:

import { useEffect } from 'react';

export default function Page() {
  useEffect(() => { console.log('Hello'); });
  return <div>Welcome</div>;
}

What is the main cause of the error?

medium

A. You cannot import from 'react' in server components

B. useEffect is a client-only hook and cannot be used in server components

C. Missing 'use client' directive at the top of the file

D. The return statement must be wrapped in a fragment

Solution

1. Step 1: Identify hook usage in server components

   Hooks like useEffect run only in client components because they depend on browser lifecycle.

2. Step 2: Understand error cause

   Using useEffect in a server component causes an error since server components do not support client hooks.

3. Final Answer:

   useEffect is a client-only hook and cannot be used in server components -> Option B

4. Quick Check:

   useEffect forbidden in server components = C [OK]

Hint: useEffect only works in client components, not server [OK]

Common Mistakes:

• Thinking 'use client' fixes the error without adding directive
• Assuming import from 'react' is disallowed
• Believing return must be wrapped in fragment

5. You want to fetch data securely on the server and display it in a component. Which approach respects Next.js server component restrictions?

hard

A. Create a server component that uses fetch to get data and renders it directly

B. Create a client component that uses fetch inside useEffect to load data

C. Create a server component that uses window.fetch to get data

D. Create a client component that reads data from the file system

Solution

1. Step 1: Identify secure data fetching method

   Server components can use fetch directly on the server to securely get data before rendering.

2. Step 2: Eliminate invalid options

   Client components fetch data in the browser, less secure; window.fetch does not exist on server; file system access is server-only.

3. Final Answer:

   Create a server component that uses fetch to get data and renders it directly -> Option A

4. Quick Check:

   Server fetch for secure data = D [OK]

Hint: Fetch data in server components for security, not client hooks [OK]

Common Mistakes:

• Using window.fetch in server components
• Fetching data in client components unnecessarily
• Trying to access file system in client components