Question 1

What are React Server Components (RSC) in Next.js?

Accepted Answer

Components that render on the server by default, can be async, and do not ship their JS to the client. RSCs can access backend resources directly, reducing client bundle size. They cannot use hooks, browser APIs, or event handlers. Composition with Client Components happens across the server/client boundary via serializable props.

Question 2

What can Server Components do that Client Components cannot?

Accepted Answer

Directly await databases/APIs, keep secrets server-side, and omit heavy logic from the client bundle. Fetch with cookies/headers, read files, and use server-only modules. Pass serializable data to Client Components for interactivity. This shifts the default toward less JS on the wire.

Question 3

Why can't you use useState or onClick in a Server Component?

Accepted Answer

Those require client runtime and interactivity; Server Components have no client hook runtime. Mark interactive leaves with 'use client'. Keep parents as Server Components when possible so only interactive islands hydrate. Passing event handlers as props from server to client is not allowed — pass data and define handlers in client code.

Question 4

How do you share data between nested Server Components without prop drilling?

Accepted Answer

Fetch where needed (React cache/dedupe) or lift data in a parent and pass props; avoid global client stores for server data. Next/fetch caching and React.cache help dedupe identical requests in one render. For cross-request sharing use proper HTTP/data cache. Don't reach for Context for server-only data trees unless you understand serialization boundaries.

Question 5

What does the server-only package prevent?

Accepted Answer

Accidentally importing server-only modules into Client Components. Importing server-only throws at build if a client bundle pulls it in — useful for DB clients and secret helpers. Pair with client-only for browser-only modules.

Question 6

How should you design the server/client component boundary?

Accepted Answer

Push 'use client' to the leaves; keep data-heavy trees on the server. Interactive widgets become client islands. Pass serializable props only. Avoid huge client wrappers. Measure bundle impact after boundary moves.

Question 7

Lead scenario: team is marking whole pages as Client Components for convenience. What do you do?

Accepted Answer

Re-establish RSC defaults, create interactive leaf patterns, lint for root-level 'use client', and educate on bundle/cost trade-offs. Provide shared client primitives (dialogs, forms). Audit top routes for unnecessary client roots. Track JS payload in CI. Make the default path the performant one.

Server Components Next.js Interview Questions

Other Next.js interview topics