Server Components run only on the server, at request or build time, and never ship their code to the browser; they can await a database query directly but cannot use state, effects or event handlers. Client Components are marked with the use client directive, hydrate in the browser, and handle interactivity. Default to server, and push the client boundary as far down the tree as you can.
Why interviewers ask this
App Router work is common now and plenty of candidates have only read about it. The interviewer wants to know whether you understand the boundary: what code actually ships to the browser, what can cross the serialization line, and why the default matters for bundle size. They are also listening for whether you know the composition trick of passing server rendered children into a client component.
How to structure your answer
- Start with where each one runs and what ships to the browser.
- Name the concrete limits: no hooks, no event handlers, serializable props only.
- State your default and the trigger for crossing the boundary.
- Mention passing server rendered children into a client shell.
Example answer
The way I think about it is that Server Components are for fetching data and rendering markup, and Client Components are for anything the user touches. A Server Component runs on the server, so I can await a query right inside it, and none of that code or those dependencies end up in the browser bundle. The trade off is no useState, no useEffect, no onClick. The moment I need one of those I add use client at the top of that file, and everything it imports joins the client bundle too. So my default is server and I push the boundary as far down as possible. On my last project I had a dashboard where only the filter dropdown and the chart tooltip were interactive, so those were two small client components and the rest of the page, including a fairly heavy markdown renderer, stayed on the server. The thing that trips people up is that props crossing the boundary have to be serializable, so you cannot pass a function down. The pattern I use instead is passing server rendered children into a client shell.
Walking into this interview soon? GhostPilot listens to your live call, spots the question the moment it is asked, and puts a structured answer on your screen in real time. Try it on your next mock, or grab a $29 Session Pass, no subscription, for the real thing.
See how it worksFollow-up questions to expect
- What can you pass as props across the server to client boundary?
- How do two client components in different parts of a server rendered page share state?
- What happens if you import a server only module into a client component?
Related react developer questions
Your interviewer will ask their own version of this. Paste your actual job description into the free Question Predictor and get the 20 questions that role is most likely to ask, with what each one is really probing.
Predict my questions