Understanding React Server Components

Published on June 9, 2025Last updated on June 20, 20255 min read

React Server Components (RSC) are one of the biggest architectural shifts in React's history. They change how we think about component rendering, moving computation from the client to the server to build faster, more efficient applications.

What are React Server Components?

React Server Components are a new type of component that runs only on the server. Unlike traditional React components that run in the browser, Server Components run during the build or on the server at request time, sending only the rendered output to the client.

Core Attributes:

Execute on the server, not in the browser
Have direct access to backend resources (databases, file systems, APIs)
Cannot use browser-only features (useState, useEffect, event handlers)
Reduce JavaScript bundle size sent to the client

Framework Requirements

Important: You Need a Supporting Framework

React Server Components are a React feature, but you cannot use them in a regular React application (like Create React App). You need a framework that supports RSC, such as Next.js App Router, which handles the server-side rendering.

Currently Supported Frameworks:

Next.js App Router Most mature and widely adopted implementation
Remix Adding experimental support
Waku Minimalist React framework with RSC support

Next.js App Router is the Standard

Most RSC usage today happens through Next.js App Router. When you create a new Next.js app with App Router, Server Components are the default:

bash
npx create-next-app@latest my-app
# Choose "Yes" for App Router during setup

# All components in app/ directory are Server Components by default
# Use 'use client' directive only when you need client-side features

How Server Components Work

When a user requests a page, Server Components run on the server, fetch the data they need, and send a serialized output to the client

jsx
// ServerComponent.js (Server Component)
import { db } from './database.js'; // Server-only import

export default async function UserProfile({ userId }) {
  // This runs on the server
  const user = await db.users.findById(userId);
  
  return (
      <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
          <p>Joined: {user.createdAt}</p>
      </div>
  );
}

Server vs Client Components

Knowing the difference between Server and Client Components is key to using RSC well.

Server Components

Capabilities:

Server-side data fetching with direct database access
Access to server-only APIs
Zero impact on bundle size

Limitations:

No state (useState, useReducer)
No effects (useEffect, useLayoutEffect)
No event handlers (onClick, onChange)
No browser APIs (localStorage, window)

jsx
// ✅ Server Component - Good practices
async function BlogPost({ postId }) {
  const post = await fetchPost(postId); // Direct server call
  
  return (
      <article>
          <h1>{post.title}</h1>
          <p>{post.content}</p>
          <PublishedDate date={post.publishedAt} />
      </article>
  );
}

Client Components

Client Components are traditional React components that run in the browser. You mark them with the 'use client' directive.

Important Note on Hydration

Client Components still run on the server first during Server-Side Rendering (SSR), then hydrate on the client. This means any server-side data fetching in Client Components gets exposed during hydration, which is why components with the 'use client' directive cannot do sensitive operations. Server Components solve this by running only on the server and sending only the serialized output.

What is Hydration?

Hydration turns the static HTML generated by Server Components into an interactive React tree in the browser. It attaches event listeners to the DOM elements and makes them interactive.

jsx
'use client';

import { useState } from 'react';

function InteractiveButton() {
  const [count, setCount] = useState(0);
  
  return (
      <button onClick={() => setCount(count + 1)}>
          Clicked {count} times
      </button>
  );
}

Practical Examples

Data Fetching Without Loading States

Server Components remove the need for loading states in many cases:

jsx
// Traditional Client Component approach
'use client';
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
      fetchUsers().then(data => {
          setUsers(data);
          setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  
  return (
      <ul>
          {users.map(user => (
              <li key={user.id}>{user.name}</li>
          ))}
      </ul>
  );
}

jsx
// Server Component approach - No loading state needed!
async function UserList() {
  const users = await fetchUsers(); // Runs on server
  
  return (
      <ul>
          {users.map(user => (
              <li key={user.id}>{user.name}</li>
          ))}
      </ul>
  );
}

Combining Server and Client Components

You can compose Server and Client Components together:

jsx
// App.js (Server Component)
import UserProfile from './UserProfile.js'; // Server Component
import InteractivePanel from './InteractivePanel.js'; // Client Component

export default async function App({ userId }) {
  const user = await fetchUser(userId);
  
  return (
      <div>
          <UserProfile user={user} />
          <InteractivePanel userId={userId} />
      </div>
  );
}

jsx
// InteractivePanel.js (Client Component)
'use client';

import { useState } from 'react';

export default function InteractivePanel({ userId }) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
      <div>
          <button onClick={() => setIsExpanded(!isExpanded)}>
              {isExpanded ? 'Collapse' : 'Expand'} Details
          </button>
          {isExpanded && (
              <div>Interactive content here...</div>
          )}
      </div>
  );
}

Streaming and Suspense

Server Components work well with React's Suspense for streaming:

jsx
import { Suspense } from 'react';

async function SlowComponent() {
  await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate slow operation
  return <div>This loaded slowly!</div>;
}

export default function App() {
  return (
      <div>
          <h1>My App</h1>
          <Suspense fallback={<div>Loading slow component...</div>}>
              <SlowComponent />
          </Suspense>
      </div>
  );
}

Benefits of React Server Components

Reduced Bundle Size

Server Components don't add to your JavaScript bundle, so pages load faster:

jsx
// This large library only runs on the server
import { MDXRemote } from 'next-mdx-remote-client/rsc'; // 100KB library

export default async function RemoteMdxPage() {
  // MDX text - can be from a database, CMS, fetch, anywhere...
  const res = await fetch('https://...')
  const markdown = await res.text()
  return <MDXRemote source={markdown} />
}
// Client receives only the processed HTML, not the 100KB library!

Direct Backend Access

Access databases, file systems, and APIs directly, with no extra API layers:

jsx
import { readFile } from 'fs/promises';
import path from 'path';

async function DocumentViewer({ filename }) {
  // Direct file system access
  const content = await readFile(
      path.join(process.cwd(), 'documents', filename),
      'utf-8'
  );
  
  return <pre>{content}</pre>;
}

Improved SEO and Performance

Because Server Components render on the server, they give you great SEO and faster initial page loads:

jsx
async function ProductPage({ productId }) {
  const product = await db.products.findById(productId);
  
  return (
      <div>
          <h1>{product.name}</h1>
          <img src={product.imageUrl} alt={product.name} />
          <p>{product.description}</p>
      </div>
  );
}
// This renders on the server, perfect for SEO!

When to Use Server Components

Ideal Use Cases

Data-heavy pages: Product listings, user profiles, dashboards
Static content: Blog posts, documentation, marketing pages
SEO-critical pages: Landing pages, product pages
Heavy computations: Image processing, data transformations

Avoid When You Need

User interactions: Forms, buttons, modals
Real-time updates: Chat applications, live data
Browser APIs: Geolocation, camera access
State management: Shopping carts, user preferences

Performance Considerations

Bundle Size Impact

jsx
// Server Component - Zero bundle impact
import { hugeLibrary } from 'path/to/huge-library'; // 500KB library

export default async function HomePage() {
  const processed = hugeLibrary.process(data); // Runs on server
  return <div>{processed.result}</div>;
}

// vs Client Component - Adds to bundle
'use client';
import { hugeLibrary } from 'path/to/huge-library'; // 500KB added to client bundle

export default function HomePage() {
  const processed = hugeLibrary.process(data);
  return <div>{processed.result}</div>;
}

Streaming Benefits

Server Components let you render progressively:

jsx
export default function Dashboard() {
  return (
      <div>
          <QuickStats /> {/* Renders immediately */}

          {/* Streams in when ready */}
          <Suspense fallback={<Skeleton />}>
              <SlowChart /> 
          </Suspense>
      </div>
  );
}

Quick Recap

Architectural Shift: Server Components move computation from client to server, reducing JavaScript bundle sizes and improving performance.
Direct Backend Access: Server Components can directly access databases, file systems, and APIs without additional API layers.
Composition Model: Combine Server and Client Components by keeping interactive elements on the client and data fetching on the server.
Performance Benefits: Faster initial page loads, better SEO, and reduced client-side JavaScript.
Use Case Clarity: Use Server Components for data-heavy, static content and Client Components for interactive features.
Framework Integration: Next.js App Router and other React frameworks are embracing Server Components as the default.

React Server Components aren't just a new feature, they're a paradigm shift that lets us build faster, more efficient web applications. Once you know when and how to use them, you can build better user experiences and simplify your application architecture.

References

All articles