What is the difference between Server Components and Client Components?
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
In the App Router components are Server Components by default. They run only on the server, can be async, can read databases or secrets directly, and send no JavaScript to the browser beyond the rendered output. They cannot use state, effects, browser APIs or event handlers.
Client Components are opted in with "use client" at the top of a file. They run on the server for the initial HTML and then hydrate in the browser, so they can use useState, useEffect, refs and event handlers. A "use client" boundary marks the module and everything it imports as client code, so keep boundaries low in the tree to minimise the bundle.
Server Components can render Client Components and pass serialisable props. Client Components cannot import Server Components, but they can receive them as children. Practically, fetch data in server components and keep interactive leaves client-side, passing only the data they need.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.