Understanding React Server Components

Published on June 9, 2025

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

What are React Server Components?

React Server Components are a new type of component that runs exclusively on the server. Unlike traditional React components that run in the browser, Server Components execute during the build process 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

How Server Components Work

When a user requests a page, Server Components execute on the server, retrieve the necessary data, and send a serialized output to the client

// 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

Understanding the distinction between Server and Client Components is crucial for effective RSC usage.

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)

// ✅ 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. They're marked with the 'use client' directive.

Important Note on Hydration

Client Components still execute 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 perform sensitive operations. Server Components solve this by running exclusively on the server and sending only the serialized output.

What is Hydration?

Hydration is the process of converting the static HTML generated by Server Components into an interactive React tree in the browser. Basically, it's the process of attaching event listeners to the DOM elements and making them interactive.

'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 eliminate the need for loading states in many scenarios:

// 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>
  );
}

// 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 effectively:

// 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>
  );
}

// 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 beautifully with React's Suspense for streaming:

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

1. Reduced Bundle Size

Server Components don't add to your JavaScript bundle, leading to faster page loads:

// 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!

2. Direct Backend Access

Access databases, file systems, and APIs directly without additional API layers:

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>;
}

3. Improved SEO and Performance

Since Server Components render on the server, they provide excellent SEO and faster initial page loads:

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

// 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 enable progressive rendering:

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 effectively 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 enables us to build faster, more efficient web applications. By understanding when and how to use them, you can create better user experiences while simplifying your application architecture.

References

GET IN TOUCH

Let's work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com