Overview
This page is the atomic definition. The React and Next.js deep-dives cover RSC usage patterns.
Definition
React Server Components (RSCs) are components that run only on the server. They can await database queries, read files, and import large server-only libraries without any of that code reaching the browser. The server renders them to a serialized format (the RSC payload), which the client React runtime stitches into the component tree. RSCs have no state, no effects, and no event handlers; interactivity requires a Client Component (marked "use client"). The result: zero JavaScript shipped to the client for the Server Component itself, smaller bundles, and reduced Time to Interactive. Next.js App Router makes every component a Server Component by default; adding "use client" opts into the browser runtime. Mixing RSC and Client Components requires care: a Server Component can import Client Components but not vice versa (use composition to pass server data via props).
When it applies
Use Server Components for data-fetching, layout, and static rendering. Use Client Components for interactive UI (forms, animated elements, browser APIs). Treat "use client" as a boundary between server and browser rendering, not as a “this component is slow” flag.
Example
// app/products/page.tsx - Server Component, no "use client"
export default async function ProductsPage() {
const products = await db.query("SELECT * FROM products LIMIT 50")
return <ProductList products={products} />
}No useEffect, no fetch on the client, no JSON serialization overhead beyond the RSC payload.
Related concepts
- react - the full React rendering model that RSC extends.
- nextjs - Next.js App Router is the primary RSC runtime.
- hydration - RSCs do not hydrate; only Client Components hydrate.
- suspense-boundary - Suspense wraps async RSC data for streaming.
- virtual-dom - RSCs skip the VDOM entirely for their own render.
Citing this term
See Server component (llmbestpractices.com/glossary/server-component).