Server Components
React paradigm where components execute on the server, sending only HTML to the client, reducing the JavaScript bundle and improving performance.
What it is
React Server Components (RSC) are components that execute exclusively on the server. They don't send JavaScript to the client — only the resulting HTML. This drastically reduces bundle size and allows direct access to databases, APIs, and the filesystem.
Server vs Client Components
| Aspect | Server Component | Client Component |
|---|---|---|
| Execution | Server | Browser |
| JavaScript to client | No | Yes |
| Interactivity | No (no useState, onClick) | Yes |
| DB/FS access | Direct | Via API |
| Marker | Default in Next.js | 'use client' |
When to use each
- Server: data fetching, DB access, static content, layouts
- Client: interactivity, event handlers, state hooks, browser APIs
Performance impact
- Less JavaScript sent to client
- Streaming SSR for progressive loading
- Data fetched on server (no waterfalls)
Why it matters
Server Components fundamentally change how React applications are built by moving rendering to the server. They reduce JavaScript sent to the client, simplify data access, and improve perceived performance — without sacrificing interactivity where needed.
References
- React Server Components — Official documentation.
- Server Components — Next.js — Vercel, 2024. Server Components implementation in Next.js.
- Rendering — Next.js — Vercel, 2024. Complete rendering guide for Next.js App Router.
Related content
- Next.js
React framework for full-stack web applications with Server Components, file-based routing, SSR/SSG, and built-in performance optimizations.
- React
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.