When to keep components on server in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why keep a component on the server in Next.js?

In Next.js, what is a main reason to keep a component rendered on the server instead of the client?

A To improve SEO by rendering content before it reaches the browser

B To allow users to interact with the component faster on their device

C To enable client-side state updates without page reloads

D To reduce server load by moving rendering to the client

💡 Hint

Think about what search engines see when content is server-rendered.

Server components render HTML on the server, so search engines can read content easily, improving SEO.

❓ component_behavior

intermediate

What happens if a server component tries to use client hooks?

Consider a Next.js server component that tries to use useState hook. What will happen?

A It will run but state updates will be ignored

B It will work normally and update state on the server

C It will convert the component automatically to a client component

D It will cause a build error because server components cannot use client hooks

💡 Hint

Remember which hooks are allowed only in client components.

Server components cannot use client-only hooks like useState. Trying to do so causes a build error.

❓ state_output

advanced

State behavior in server vs client components

Given a Next.js app with a server component rendering a client component inside it, where is the state stored and updated?

A State is stored and updated only in the client component on the browser

B State is stored on the server and updates cause server re-renders

C State is shared between server and client components automatically

D State is stored in the server component and passed down as props

💡 Hint

Think about where hooks like useState run.

State hooks like useState run only in client components, so state lives and updates in the browser.

📝 Syntax

advanced

Correct syntax to mark a component as client in Next.js

Which of the following is the correct way to mark a React component as a client component in Next.js 14+?

A Adding <ClientOnly> wrapper around the component

B Using the client: true property in the component export

C "use client"; at the top of the component file

D Naming the file with .client.js extension

💡 Hint

Look for the special directive string.

Next.js uses the special directive "use client"; at the top of the file to mark client components.

🔧 Debug

expert

Why does this server component fail to render?

This Next.js server component imports a client component but does not mark it correctly. What error will occur?

NextJS

import ClientButton from './ClientButton';

export default function ServerComp() {
  return <ClientButton />;
}

A No error, component renders normally

B Build error: Client component imported into server component without "use client" directive

C Warning: Client component should not be nested inside server component

D Runtime error: ClientButton is undefined

💡 Hint

Check if the client component file has the correct directive.

Client components must have "use client" directive. Importing a client component without it causes a build error.

Practice

1. Which of the following is the best reason to keep a component as a server component in Next.js?

easy

A. It requires frequent updates based on user interaction.

B. It needs to handle user clicks and input events.

C. It fetches data securely and renders static content.

D. It uses browser-only APIs like localStorage.

Solution

1. Step 1: Understand server component purpose

   Server components run on the server and are ideal for static content and secure data fetching.

2. Step 2: Identify interactive needs

   Components that handle user clicks or browser APIs must be client components, not server components.

3. Final Answer:

   It fetches data securely and renders static content. -> Option C

4. Quick Check:

   Server components = static + secure data [OK]

Hint: Server components = static or secure data only [OK]

Common Mistakes:

• Choosing server component for interactive UI
• Using browser APIs in server components
• Thinking server components handle events

2. Which syntax correctly forces static rendering for a server component in Next.js 14+?

easy

A. export const dynamic = 'force-static';

B. export const runtime = 'edge';

C. export const dynamic = 'force-dynamic';

D. export const client = true;

Solution

1. Step 1: Recall server component syntax

   Server components can be forced static with export const dynamic = 'force-static';.

2. Step 2: Differentiate other options

   export const dynamic = 'force-dynamic'; (dynamic = 'force-dynamic') forces dynamic rendering, B (runtime = 'edge') sets edge runtime without forcing static, D is invalid syntax.

3. Final Answer:

   export const dynamic = 'force-static'; -> Option A

4. Quick Check:

   Force static = server component [OK]

Hint: Use 'force-static' to keep component server-only [OK]

Common Mistakes:

• Confusing client directive with server component
• Using 'force-dynamic' for server-only components
• Mixing runtime and dynamic exports

3. Consider this Next.js server component code snippet:

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

What will be the output rendered in the browser?

medium

A. <h1>Hello, [name from DB]!</h1>

B. Error: fetchNameFromDB is not defined

C. <h1>Hello, undefined!</h1>

D. Nothing renders because server components cannot fetch data

Solution

1. Step 1: Understand server component data fetching

   Server components can fetch data directly on the server before rendering.

2. Step 2: Analyze the code behavior

   The function fetchNameFromDB() is not defined in the snippet, so this will cause a runtime error.

3. Final Answer:

   Error: fetchNameFromDB is not defined -> Option B

4. Quick Check:

   Undefined functions cause errors [OK]

Hint: Undefined functions cause errors in server components [OK]

Common Mistakes:

• Assuming fetchNameFromDB is defined
• Thinking server components can't fetch data
• Confusing client-side data fetching with server

4. You have a Next.js component that fetches user data and also handles a button click event. You mistakenly keep it as a server component. What error or issue will you face?

medium

A. The component will render twice causing performance issues.

B. The component will throw a syntax error at build time.

C. The data fetching will fail because server components cannot fetch data.

D. The button click event will not work because server components cannot handle client events.

Solution

1. Step 1: Understand event handling in Next.js components

   Only client components can handle browser events like button clicks.

2. Step 2: Identify the problem with server components

   Server components run on the server and cannot respond to client-side events, so the button click won't work.

3. Final Answer:

   The button click event will not work because server components cannot handle client events. -> Option D

4. Quick Check:

   Server components = no client events [OK]

Hint: Client events need client components [OK]

Common Mistakes:

• Expecting server components to handle clicks
• Thinking server components cause syntax errors
• Confusing data fetching ability

5. You want to build a Next.js page that shows a list of blog posts fetched from a database and includes a search box that filters posts as the user types. How should you split components between server and client?

hard

A. Keep the blog list as a server component and the search box as a client component.

B. Make both blog list and search box client components for interactivity.

C. Make both blog list and search box server components for performance.

D. Keep the search box server component and blog list client component.

Solution

1. Step 1: Identify static and interactive parts

   The blog list is static content fetched from the database, suitable for server components.

2. Step 2: Identify interactive UI needs

   The search box needs to respond to user typing, so it must be a client component.

3. Step 3: Combine components properly

   Use server component for data fetching and rendering list, client component for search input and filtering.

4. Final Answer:

   Keep the blog list as a server component and the search box as a client component. -> Option A

5. Quick Check:

   Static data = server, interactive UI = client [OK]

Hint: Static content server, interactive UI client [OK]

Common Mistakes:

• Making everything client component unnecessarily
• Trying to handle user input in server component
• Mixing up which part fetches data