React Server Components
React Server Components (RSC) are a React component type that renders exclusively on the server, never shipping its component code or dependencies to the client, and can be seamlessly mixed with traditional client components in a single…
Definition
React Server Components (RSC) are a React component type that renders exclusively on the server, never shipping its component code or dependencies to the client, and can be seamlessly mixed with traditional client components in a single component tree. They enable server-side data fetching directly inside components without an API layer, while keeping the resulting bundle size small.
Overview
React Server Components were introduced by the React team (Meta) as a new architectural primitive distinct from — and complementary to — traditional server-side rendering. Where SSR renders a client component's HTML on the server but still ships that component's full JavaScript to the browser for hydration, an RSC never ships its JavaScript to the client at all: it renders once on the server (typically per request), producing a serialized description of the resulting UI tree that the client uses to render or update the page, but the server component's own code, and any server-only dependencies it imports (a database client, a large templating library, secrets), stay entirely on the server. This lets developers write components that directly `await` a database query or call an internal API inside the component body — no separate `getServerSideProps`, API route, or client-side `useEffect` fetch required — while React handles streaming the resulting tree to the client incrementally. Server Components can render Client Components as children (marked with a `'use client'` directive), and the two compose within a single tree: server components handle data-fetching and non-interactive rendering, client components handle interactivity, state, and browser APIs, with props passed from server to client components serialized across the boundary. RSC is the architectural foundation of Next.js's App Router (the primary framework where it has shipped broadly to production), and its introduction significantly reduced typical client JavaScript bundle sizes for data-heavy pages, since large libraries used purely for server-side rendering or data processing never cross into the client bundle. It works closely alongside Server Actions (functions callable from client components that execute on the server, used for mutations) and streaming SSR (to deliver the resulting tree progressively). The model represents a notable shift in React's application architecture away from 'everything is a client component that fetches its own data' toward a hybrid where the server does more of the rendering and data work by default.
Key Concepts
- Renders exclusively on the server; component code never ships to the client bundle
- Enables `async`/`await` data fetching directly inside component bodies, no API layer needed
- Composes with Client Components (marked `'use client'`) within a single component tree
- Reduces client-side JavaScript bundle size for data-heavy pages
- Works with streaming SSR to progressively deliver the rendered tree
- Server-only dependencies (DB clients, secrets, large libraries) never reach the browser
- Pairs with Server Actions for server-executed mutations triggered from client components
- Core architecture of Next.js App Router
Use Cases
Frequently Asked Questions
From the Blog
Build a To-Do List App in React
A comprehensive guide to build a to-do list app in react — written for learners at every level.
Read More Projects & Case StudiesProject: Build a Full-Stack To-Do App with React, Node.js and MongoDB
A full-stack to-do app is the perfect first MERN project — it covers every concept you'll use in production: REST APIs, database CRUD operations, JWT authentication, and deploying a frontend and backend separately. Build it once, understand the full stack.
Read More ProgrammingReact Hooks Explained: useState, useEffect, and Beyond
React Hooks replaced class components and changed how React developers think about state and side effects. This guide explains useState, useEffect, useContext, useRef, and custom hooks clearly, with practical examples for each.
Read More Learn Through HobbiesLearn React Through Game Development: Build a Chess Clock
A chess clock is the perfect React project — it's small enough to finish in an afternoon but teaches useState, useEffect, timer management, and conditional rendering in a context that makes every concept feel purposeful. No boring counter apps.
Read More