How it works
A Server Component can be async, read a database or call an API directly, and render the result. Its code never reaches the browser; React sends a compact description of the output, which the browser merges into the page. Components that need state or event handlers are marked 'use client' and hydrate as usual, and the two kinds can be nested inside each other.
Server Functions, marked 'use server', let browser code call server logic, such as saving a form, without writing an API route. Server Components became stable in React 19. The App Router in Next.js is the most widely used implementation, and frameworks such as React Router and Waku support them to varying degrees.
Code that the browser can reach on the server is an attack surface: in December 2025 a critical flaw known as React2Shell in the protocol behind Server Components allowed remote code execution, and fixing it meant upgrading React and Next.js straight away.
React Server Components pros and cons
Pros
- Less JavaScript sent to the browser
- Data fetching sits next to the component that needs it
- Secrets, database access and heavy libraries stay on the server
- Server Functions remove much API boilerplate for forms
Cons
- A new mental model: which code runs where is easy to confuse
- Caching and debugging are harder than in a plain single-page app
- Tied to frameworks that support it, mainly Next.js
- Server endpoints exposed to browsers need prompt security patching
When to use React Server Components
Pick it when
- Content-heavy React apps where bundle size and SEO matter
- Pages that combine lots of server data with small interactive parts
Skip it when
- Fully interactive apps behind a login, where a Vite single-page app is simpler
- Teams not ready to learn the boundary between server and client code
Related terms
More in Rendering and architecture
Where pages are built