Explain React Server Components (RSC) in React

89 / 100

Advancedadvanced

React Server Components (RSC)

Understand the server/client component split introduced with React Server Components and what problem it solves.

React Server Components (RSC) are a new category of component that renders entirely on the server, never shipping their own JavaScript to the client, and never re-rendering in the browser due to client-side state changes. They can directly access server-only resources — databases, the filesystem, internal APIs with secrets — without needing to expose an intermediate API endpoint, since their code simply never runs in the browser at all.

React Server Components are like a restaurant menu printed and handed to you fully prepared by the kitchen (the server), with only a few specific interactive elements — like a QR code you can scan to customize your order (a Client Component 'island') — needing any action or code to run on your end, rather than handing you the kitchen's entire recipe book and cooking equipment (the whole app's JavaScript) just to read a menu.

Key Concepts

This is a fundamentally different model from traditional server-side rendering (SSR), which renders an initial HTML snapshot on the server but then ships the full component code to the client anyway for hydration. RSC components ship zero JavaScript for their own logic — only their rendered output (serialized in a special format, not just plain HTML) reaches the client, meaningfully reducing bundle size for parts of the tree that don't need any client-side interactivity.

Client Components (marked with a 'use client' directive at the top of the file) are the traditional React components we're used to — they run in the browser, can use hooks like useState, and handle interactivity. A typical RSC-based app tree mixes both: Server Components fetch data and render static structure, importing and rendering Client Components at the specific leaves that need interactivity, and data flows from Server to Client Components via serializable props (functions and non-serializable values generally can't cross that boundary directly).

'use client'useState

Interviewers assessing familiarity with the newest React paradigms ask candidates to explain the core distinction (zero client JS + direct server resource access for Server Components, vs. interactivity and hooks for Client Components) and to correctly identify which category a given piece of UI belongs in — a static content block with a database query is naturally a Server Component, while a button with an onClick handler must be a Client Component.