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.