Explain the difference between Server and Client Components in Next.js

WHAT THIS TESTS This question tests whether you understand the React Server Components model that Next.js uses in the App Router, specifically the split between work that happens on the server and work that happens in the browser. The interviewer wants to see that you know why server components reduce bundle size, how they access backend resources directly, and where the boundary with client components must be drawn. They also want to hear that you understand composition, meaning a server component can import and render a client component but not vice versa without creating a client boundary.

A GOOD ANSWER COVERS A strong answer hits four things in order. First, execution environment: server components run only on the server and their code is never downloaded by the browser, which keeps the client bundle small. Second, capabilities: server components can read files, query a database, or call private APIs directly because they execute in a server runtime. Third, client component behavior: client components are sent to the browser as JavaScript, hydrate, and can use hooks like useState, useEffect, and browser APIs. Fourth, composition rules: you can nest a client component inside a server component to isolate interactivity, but if a server component is imported into a client component it becomes part of the client bundle.

COMMON WRONG ANSWERS The biggest red flag is conflating server components with SSR. SSR renders a page on the server and still ships the component JavaScript to hydrate; server components do not ship their component code to the client at all. Another mistake is claiming server components never rerender. They can rerender on the server when data changes or during navigation. A third red flag is saying server components cannot contain any interactive elements. They can render client components as children, so a server component page can absolutely contain buttons and forms as long as the interactive leaf is a client component.

LIKELY FOLLOW-UPS Expect the interviewer to ask how you would fetch data in each type, where the use client directive belongs, or how this affects caching. They might also ask what happens if you import a heavy library into a server component versus a client component, or how you would pass props from a server component to a client component. Be ready to discuss serialization rules, since props passed across the boundary must be serializable.

ONE CONCRETE EXAMPLE Imagine a product detail page. The page itself is a server component. It queries a SQL database directly in the same file to get the product title, price, and description, then renders them as static HTML with zero client JavaScript for that part. Inside that page, you import a BuyButton client component that uses useState to manage a loading spinner and onClick to call an API route. The BuyButton ships JS to the browser, but the surrounding layout, navigation, and product info do not. This keeps the initial page load fast while preserving interactivity exactly where it is needed.