Concept questionMedium~7 min

Interview question

How do you decide whether a Next.js component should be a server component or a client component?

Server vs client components in Next.js

Explains Next.js server/client component boundaries, interactivity, data access, serialization, and bundle impact.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would keep a component as a server component when it can render from server-side data without browser-only interactivity. Server components can fetch data on the server, avoid shipping that component's JavaScript to the browser, and keep secrets or backend-only calls off the client. I would use a client component when it needs state, event handlers, effects, browser APIs, or interactive behavior.

Full answer below

Practice focus

Next.js app model, server components, client components, interactivity, data fetching, serialization, and bundle size.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Next.js interviews often test whether candidates understand the server/client boundary instead of adding use client everywhere.
I would keep a component as a server component when it can render from server-side data without browser-only interactivity. Server components can fetch data on the server, avoid shipping that component's JavaScript to the browser, and keep secrets or backend-only calls off the client. I would use a client component when it needs state, event handlers, effects, browser APIs, or interactive behavior.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would place the client boundary as low as practical. A page can be mostly server-rendered while a small search box, menu, or form is client-rendered. Props passed from server to client components must be serializable, so functions and complex server-only objects do not cross that boundary. If a client component needs data changes after interaction, it can call a route handler, server action, or API depending on the app architecture.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch bundle size and hydration cost. Overusing client components can ship unnecessary JavaScript and slow the page. Overusing server components can make interactive workflows awkward or cause extra round trips. The boundary also affects auth and caching: user-specific server data must not be cached as public data. I would test both first load and interaction paths because a page can render quickly but still feel slow once the user interacts.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Adding use client to an entire page by default.
Passing non-serializable props from server to client components.
Trying to use browser APIs in server components.
Fetching user-specific server data with unsafe caching.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain what makes a component client-side.
Secrets or backend-only calls leak into browser code.
Hydration cost grows because everything is client-rendered.
Interactive pieces are forced through awkward server-only patterns.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Where would you place the client boundary?
What props can cross from server to client?
How does this affect bundle size?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Go deeper

Practice the next layer of the same subject.

Next.js BFF Boundary

Concept questionMedium~7 min

Interview question

How do you decide whether a Next.js component should be a server component or a client component?

Server vs client components in Next.js

Explains Next.js server/client component boundaries, interactivity, data access, serialization, and bundle impact.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Next.js app model, server components, client components, interactivity, data fetching, serialization, and bundle size.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Next.js interviews often test whether candidates understand the server/client boundary instead of adding use client everywhere.
I would keep a component as a server component when it can render from server-side data without browser-only interactivity. Server components can fetch data on the server, avoid shipping that component's JavaScript to the browser, and keep secrets or backend-only calls off the client. I would use a client component when it needs state, event handlers, effects, browser APIs, or interactive behavior.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would place the client boundary as low as practical. A page can be mostly server-rendered while a small search box, menu, or form is client-rendered. Props passed from server to client components must be serializable, so functions and complex server-only objects do not cross that boundary. If a client component needs data changes after interaction, it can call a route handler, server action, or API depending on the app architecture.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch bundle size and hydration cost. Overusing client components can ship unnecessary JavaScript and slow the page. Overusing server components can make interactive workflows awkward or cause extra round trips. The boundary also affects auth and caching: user-specific server data must not be cached as public data. I would test both first load and interaction paths because a page can render quickly but still feel slow once the user interacts.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Adding use client to an entire page by default.
Passing non-serializable props from server to client components.
Trying to use browser APIs in server components.
Fetching user-specific server data with unsafe caching.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain what makes a component client-side.
Secrets or backend-only calls leak into browser code.
Hydration cost grows because everything is client-rendered.
Interactive pieces are forced through awkward server-only patterns.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Where would you place the client boundary?
What props can cross from server to client?
How does this affect bundle size?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Go deeper

Practice the next layer of the same subject.

Next.js BFF Boundary

How do you decide whether a Next.js component should be a server component or a client component?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

How do you decide whether a Next.js component should be a server component or a client component?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper