Technologies
React Server Components Development
Server components render entirely on the server and never ship their code to the browser — no hydration cost, no JavaScript bundle for that piece of UI. Client components are the ones that still need interactivity: forms, click handlers, anything with state. The skill is deciding where that boundary sits.
This matters directly for load performance — a page built mostly from server components ships a fraction of the JavaScript a fully client-rendered equivalent would.
How the Split Works
- arrow_rightServer components fetch data directly and render to HTML on the server, with zero client-side JS footprint
- arrow_rightClient components ('use client') handle anything interactive — forms, toggles, anything using useState or browser APIs
- arrow_rightA server component can render a client component, but not the other way around directly — data has to be passed down as props
- arrow_rightServer components can access backend resources (databases, file systems, secrets) directly without an API layer in between
Where the Boundary Should Sit
The general rule: push 'use client' as far down the component tree as possible. A page with a static header, a list of items, and one interactive filter dropdown should only mark the dropdown as a client component — not the entire page.
Common Mistakes
- arrow_rightMarking a whole page 'use client' because one small piece needs interactivity
- arrow_rightTrying to use hooks or browser APIs inside a server component, which isn't supported
- arrow_rightNot realizing that context providers need to be client components, which can force more of the tree client-side than intended if placed too high
Frequently Asked Questions
Do server components replace client-side React entirely?add
No — they're a rendering strategy that coexists with client components. Anything genuinely interactive still runs in the browser; server components just handle the parts that don't need to.
Can server components fetch from a database directly?add
Yes, which is one of their bigger advantages — no need to build a separate API endpoint just to expose data to a page that only your own frontend consumes.
Does this work outside of Next.js?add
React Server Components require a framework with the infrastructure to support them (streaming, the server/client boundary). Next.js is currently the most mature implementation; other frameworks are adding support at different stages of maturity.