Server component
A server component (React Server Components) is a React component that runs only on the server — it can fetch data directly from the database, use server-only secrets, and ship zero JavaScript to the client. The rendered output is serialised and sent to the client alongside any client components, enabling fine-grained server/client splits.
RSCs are React's answer to the per-page hydration cost of traditional SSR: a server component runs and produces its output without sending any of its code to the client, while client components (marked with 'use client') still hydrate as before. The model allows colocation of server logic and UI without forcing an API layer between them. The trade-offs: a new mental model (every component is server-by-default; client requires explicit opt-in), framework support is concentrated in Next.js App Router today, and debugging spans both server and client. The pattern has effectively reset the assumed structure of React apps for new builds in 2024-2026.
Related terms
- Client component
A client component (in React Server Components terminology) is a component marked with 'use client' that hydrates on the client and can use browser APIs, event handlers, state, and effects.
- Hydration
Hydration is the process of attaching JavaScript event handlers and state to server-rendered HTML on the client — the page is visible immediately (fast FCP) but interaction works only after hydration completes.
- Island architecture
Island architecture is the frontend pattern where most of a page is static server-rendered HTML with no client JavaScript, and only the interactive components (the 'islands') hydrate independently.