Do React Server Components replace Server-Side Rendering (SSR)?

No, they complement it. SSR describes rendering HTML on the server for any component type; RSC is a distinct component type that never ships its JavaScript to the client at all. A page can use SSR for client components' initial HTML while also using Server Components for the parts that need never hydrate.

Can a Server Component use React hooks like useState?

No. Server Components render once on the server and have no client-side lifecycle, so stateful hooks like `useState`, `useEffect`, or event handlers are not allowed inside them — any interactivity must live in a Client Component, marked with the `'use client'` directive.

How do Server Components pass data to Client Components?

Server Components can render Client Components and pass props to them, but those props must be serializable (since they cross a server-to-client boundary) — functions, class instances, and other non-serializable values generally can't be passed directly, except for Server Actions, which are specially serialized as callable references.

Is RSC exclusive to Next.js?

RSC is a React feature developed by the React core team, not a Next.js-specific feature, but Next.js's App Router is the primary framework that has shipped it broadly to production. Other frameworks and bundlers have varying levels of RSC support as the ecosystem catches up.

Does using Server Components mean less JavaScript is always sent to the browser?

Generally yes for the portions of the tree that are Server Components, since their code and dependencies never reach the client bundle. However, any Client Components in the tree still ship their own JavaScript as usual, so total savings depend on the ratio of server-only to interactive UI.

What's the difference between a Server Component and a Server Action?

A Server Component is a component that renders on the server. A Server Action is a function, callable from the client (e.g., attached to a form's `action`), that executes on the server when invoked — typically used for mutations rather than rendering.

Web

React Server Components

AdvancedTechnique7.3K learners

#ReactServerComponents #Web#Technique#Advanced#StreamingSSR #Suspense #IslandsArchitecture #PartialHydration #WebDevelopment#Glossary#SkillVeris

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

Data-heavy pages (dashboards, e-commerce catalogs) fetching data directly in components

Reducing client bundle size by keeping large server-only libraries out of the browser

Rendering markdown/CMS content processed by heavy server-side libraries without shipping them

Building forms with Server Actions for mutations without hand-written API routes

SEO-critical pages needing full server-rendered content with minimal client JS overhead

Composing static, non-interactive UI (server components) with isolated interactive widgets (client components)

Frequently Asked Questions

From the Blog

Projects & Case Studies

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.

Project: 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.

React 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.

Learn 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.