React Server Components: Vocabulary for Modern Frontend Development

React Server Components (RSC) introduced a new mental model — and a new vocabulary — for frontend architecture. Whether you are interviewing for a senior frontend role, reviewing a Next.js PR, or explaining the rendering strategy to a backend colleague, precise RSC terminology demonstrates mastery of modern React.

The Component Model

Server Component A React component that renders exclusively on the server. It has direct access to databases, file systems, and environment variables. It cannot use hooks like useState or useEffect, and it cannot handle browser events. Server Components are the default in Next.js App Router. Phrase: “The product listing is a Server Component — it fetches data directly from the database without exposing credentials to the client.”

Client Component A component that can use browser APIs, React hooks, and event handlers. Marked with the 'use client' directive at the top of the file. Client Components can be rendered on the server too (for the initial HTML), but they are hydrated on the client. Phrase: “The search bar is a Client Component because it needs useState to manage the input value.”

‘use client’ directive The string 'use client' at the top of a file that marks the component (and everything it imports) as client-side code. Phrase: “Adding ‘use client’ to the modal component pulled in a large animation library — check the bundle size.”

‘use server’ directive Marks a function as a Server Action — a server-side function that can be called directly from Client Components, typically for form submissions or mutations. Phrase: “The form uses a Server Action marked with ‘use server’ — no API route needed.”

Rendering and Delivery

Hydration The process by which React attaches event listeners and state to the static HTML sent by the server, making it interactive in the browser. Hydration is a cost — it requires downloading and executing JavaScript. Phrase: “Excessive hydration was slowing Time to Interactive — we converted several components to Server Components.”

Streaming SSR Server-side rendering that sends HTML to the browser in chunks rather than waiting for the full page to be ready. Suspense boundaries control which parts stream first. Phrase: “With streaming SSR, the shell of the page arrives in milliseconds and the data-heavy sections stream in as they resolve.”

Suspense boundary A React component (<Suspense fallback={<Loading />}>) that defines what to show while a child component’s data or code is still loading. In RSC, Suspense boundaries also define streaming chunks. Phrase: “Wrap the recommendation panel in a Suspense boundary so it doesn’t block the rest of the page from rendering.”

RSC payload The serialised description of the server-rendered component tree sent from the server to the client. The client uses the RSC payload to reconcile the component tree without a full page reload during navigation. Phrase: “The RSC payload for this route is too large — you’re sending too much data that could be filtered on the server.”

Data Fetching

Data fetching on server In RSC, components can be async functions that await data directly — no useEffect, no loading states in component code, no client-side fetch calls. Phrase: “The dashboard components are all async Server Components — they fetch their own data at render time.”

Server Action A server-side async function that can be invoked from the client, typically used for mutations (form submissions, database writes). Server Actions replace many use cases for API routes. Phrase: “We replaced the /api/update-profile route with a Server Action — less code, same security boundary.”

Interview Phrases You Should Know

• “RSC shifts the data-fetching boundary from the client to the server, reducing JavaScript sent to the browser.”
• “The key trade-off is interactivity — Server Components can’t hold state, so interactive UI must be Client Components.”
• “Hydration cost is why converting static UI to Server Components improves Core Web Vitals.”
• “Suspense boundaries let you progressively render the page — critical content first, slower data-dependent sections after.”

Practice: Take a Next.js App Router page you have built and write a 100-word architectural explanation of which components are Server Components and why, using the vocabulary from this post.