FRONT END

Home › Glossary › Front End· 335 ·

React Server Components

\\ree-akt sur-vur kom-poh-nents\\n.

Filed underFront EndSoftware EngineeringArchitecture

In brief · quick answer

React Server Components (RSC) are React components that render exclusively on the server, sending only their HTML output to the client. They reduce client-side JavaScript by keeping data fetching, database access, and rendering logic on the server.

§ 1 Definition

React Server Components (RSC) represent a paradigm shift in React. Introduced as stable in React 19 (December 2024), RSCs are components that execute only on the server, never on the client. They can directly access databases, file systems, and backend services without exposing any of that logic to the browser. RSCs send a special serialized format (not standard HTML) to the client that React uses to reconstruct the component tree without executing the component's JavaScript. This eliminates an entire category of client-side code: data fetching logic, API call plumbing, and server-only dependencies. Components are server components by default in frameworks that support RSC (Next.js App Router). Components that need interactivity, event handlers, state, or browser APIs must explicitly declare themselves as client components with the `'use client'` directive. RSCs and client components can be freely nested, with server components providing the static shell and client components adding interactivity where needed.

§ 2 Server vs Client Boundary

The boundary between server and client components is explicit. By default, all components in an RSC-enabled framework (Next.js App Router) are server components. Adding `'use client'` at the top of a file marks all components in that file as client components. Server components can import and render client components, but client components cannot import server components. Server components can pass serializable props (strings, numbers, objects, JSX) to client components. Functions, Date objects, and React class instances cannot be passed across the boundary.

§ 3 Benefits and Tradeoffs

The primary benefit of RSC is reduced JavaScript. By moving data fetching and rendering to the server, RSCs can eliminate 30-60% of client-side JavaScript for content-heavy pages. They also improve perceived performance by streaming HTML as it renders and by reducing the number of round trips for data. The tradeoffs include a more complex mental model (understanding the server/client boundary), debugging challenges (server errors appear differently than client errors), and the requirement for a framework that supports RSC (you cannot use RSC with plain React or Vite+React).

§ 4 Note

Common misunderstanding: React Server Components are not the same as server-side rendering (SSR). SSR renders your entire React tree once on the server, sends HTML, then hydrates the whole thing on the client. RSC render specific components on the server and never send their JavaScript to the client at all. SSR sends all component code to the client. RSC sends zero component code for server components. Another mistake: assuming all components should be server components. Interactive components (forms, buttons, sliders, anything with state or event handlers) must be client components. The art is in placing the boundary correctly.

§ 5 In code

```tsx
// This is a Server Component by default (no 'use client' directive)
// It can be async and directly access the database

export default async function PostList() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  });

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}
```

§ 6 Common questions

Q. Do React Server Components replace client-side React?: A. No. Client components remain essential for interactivity, state, effects, and browser APIs. RSCs complement client components by handling the parts of the UI that do not need interactivity.
Q. Can I use RSC outside of Next.js?: A. Yes, but it requires a framework that implements the RSC protocol. Next.js is the most mature. Other options include Vercel's alternative frameworks and custom RSC setups.

Key takeaways

RSCs render only on the server, sending zero JavaScript to the client for those components.
The server/client boundary is enforced by the 'use client' directive.
RSCs and SSR are different. SSR hydrates all code on client. RSC never sends server component code.

How Atomic Glue helps

Atomic Glue architects React Server Components into our Next.js projects to minimize client-side JavaScript. Pages that are mostly content (marketing pages, blog posts, documentation) can be built almost entirely with server components, sending minimal JavaScript to the browser. This translates directly to better Core Web Vitals scores, faster time to interactive, and better SEO performance. Our team understands where to draw the server-client boundary for each project. It is a core optimization in our website development process.

Get in touch

# React Server Components

Category: Front End (also: Software Engineering, Architecture)

Author: Atomic Glue Development Team

## Definition

## Server vs Client Boundary

## Benefits and Tradeoffs

## Note

## In code

## Common questions
Q: Do React Server Components replace client-side React?
A: No. Client components remain essential for interactivity, state, effects, and browser APIs. RSCs complement client components by handling the parts of the UI that do not need interactivity.
Q: Can I use RSC outside of Next.js?
A: Yes, but it requires a framework that implements the RSC protocol. Next.js is the most mature. Other options include Vercel's alternative frameworks and custom RSC setups.

## Key takeaways

RSCs render only on the server, sending zero JavaScript to the client for those components.
The server/client boundary is enforced by the 'use client' directive.
RSCs and SSR are different. SSR hydrates all code on client. RSC never sends server component code.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/react-server-components