What are React Server Components, and how do they change the way you build a React app?
What the interviewer wants to hear
- Components that render only on the server and send no JS to the client
- Can access data sources directly and be async
- Client Components marked with "use client" for interactivity
- Props across the boundary must be serialisable
- Reduce bundle size; combine with Suspense streaming
- Need care with caching and data freshness
Model answer
React Server Components run only on the server, during the build or per request. Their code and dependencies are never sent to the browser, which shrinks the JavaScript bundle. They can be async and read from a database or internal API directly, so data fetching moves closer to the data and avoids client waterfalls. Anything interactive, using state, effects or browser APIs, must be a Client Component marked with "use client". The main rule is that props passed from a server to a client component must be serialisable, so no functions except Server Actions. In practice, I keep most of the tree as server components and push client components to the leaves. With Suspense, slow parts can stream in later. The trade-off is a new mental model, and I must think carefully about caching and when data is revalidated.
Can you answer it under time pressure?
Take a timed hard round and get scored on every answer.
More hard Frontend Developer questions
- How would you design and build a shared component library (design system) used by several product teams?
- A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?
- What are the main security risks for a frontend application and how do you protect against them?
- Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
- How would you design a web app that keeps working offline, for example for field workers with poor connectivity?
- You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
- How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?
- Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
- How do you know your frontend is healthy in production? Describe the monitoring you would set up.