Jeff Bruchado
Back to blog

React Server Components: The Performance Revolution Dominating 2025

React Server Components (RSC) have become the de facto standard for high-performance React applications in 2025. With frameworks like Next.js 15 adopting RSC as default, understanding this technology is no longer optional.

But what exactly are Server Components? And why are companies like Vercel, Meta and Shopify massively migrating to this architecture?

The Problem RSC Solves

Bundle Size Growing Exponentially

// ❌ Traditional component (Client Component)
// EVERYTHING goes into the client JavaScript bundle
import { useState } from "react";
import { formatDate } from "date-fns"; // 100KB
import { marked } from "marked"; // 50KB
import { Prism } from "prism-react-renderer"; // 80KB
import _ from "lodash"; // 70KB

export default function BlogPost({ slug }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`/api/posts/${slug}`)
      .then((res) => res.json())
      .then((data) => {
        setPost(data);
      });
  }, [slug]);

  if (!post) return <div>Loading...</div>;

  const html = marked(post.content);
  const formattedDate = formatDate(post.date, "PPP");

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
}

// JavaScript bundle sent to client: ~300KB
// Time to Interactive: 3-5 seconds on 3G

The Solution with React Server Components

// ✅ Server Component
// Zero JavaScript sent to client for this component!
import { formatDate } from "date-fns";
import { marked } from "marked";
import db from "@/lib/database";

// This component runs ONLY on the server
export default async function BlogPost({ slug }) {
  // Direct database fetch (no API route needed)
  const post = await db.post.findUnique({
    where: { slug },
  });

  if (!post) return <div>Post not found</div>;

  // Heavy processing on server
  const html = marked(post.content);
  const formattedDate = formatDate(post.date, "PPP");

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
}

// JavaScript bundle sent to client: ~0KB (only HTML)
// Time to Interactive: instant

How React Server Components Work

Rendering Architecture

// 1. Server Component (default in Next.js 13+)
// File: app/dashboard/page.tsx

import { Suspense } from "react";
import { Analytics } from "./analytics"; // Server Component
import { UserProfile } from "./user-profile"; // Server Component
import { ChatWidget } from "./chat-widget"; // Client Component

export default async function DashboardPage() {
  // Parallel data fetching on server
  const [user, stats] = await Promise.all([
    fetchUser(),
    fetchAnalytics(),
  ]);

  return (
    <div>
      <h1>Dashboard</h1>

      {/* Server Component - renders on server */}
      <UserProfile user={user} />

      {/* Streaming with Suspense */}
      <Suspense fallback={<AnalyticsSkeleton />}>
        <Analytics data={stats} />
      </Suspense>

      {/* Client Component - interactivity on client */}
      <ChatWidget userId={user.id} />
    </div>
  );
}

// Direct async functions (no useEffect!)
async function fetchUser() {
  const res = await fetch("https://api.example.com/user", {
    cache: "force-cache", // Automatic caching
  });
  return res.json();
}

async function fetchAnalytics() {
  const res = await fetch("https://api.example.com/analytics", {
    next: { revalidate: 60 }, // Revalidate every 60s
  });
  return res.json();
}

Server vs Client Components: When to Use?

// ✅ Use Server Components (default) for:
// - Data fetching
// - Direct backend access (DB, filesystem, internal APIs)
// - Heavy content rendering
// - Operations requiring secrets/tokens
// - Reducing JavaScript bundle

// app/products/[id]/page.tsx (Server Component)
import db from "@/lib/db";

export default async function ProductPage({ params }) {
  const product = await db.product.findUnique({
    where: { id: params.id },
    include: { reviews: true, category: true },
  });

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <Reviews reviews={product.reviews} />
    </div>
  );
}

// ✅ Use Client Components ONLY for:
// - Interactivity (onClick, onChange, etc)
// - Hooks (useState, useEffect, useContext, etc)
// - Browser APIs (localStorage, window, document)
// - Event listeners
// - React lifecycle

// app/components/add-to-cart-button.tsx (Client Component)
"use client"; // Required directive for Client Components

import { useState } from "react";
import { useCart } from "@/hooks/use-cart";

export function AddToCartButton({ productId }: { productId: string }) {
  const [isAdding, setIsAdding] = useState(false);
  const { addItem } = useCart();

  const handleClick = async () => {
    setIsAdding(true);
    await addItem(productId);
    setIsAdding(false);
  };

  return (
    <button onClick={handleClick} disabled={isAdding}>
      {isAdding ? "Adding..." : "Add to Cart"}
    </button>
  );
}

Advanced Patterns with RSC

1. Streaming with Suspense

// app/dashboard/page.tsx
import { Suspense } from "react";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* Lightweight component renders immediately */}
      <UserGreeting />

      {/* Heavy component streams when ready */}
      <Suspense fallback={<ChartsSkeleton />}>
        <Charts />
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <DataTable />
      </Suspense>
    </div>
  );
}

// Server Component with slow fetch
async function Charts() {
  // Simulates complex analytics query
  const data = await fetchAnalyticsData(); // 2-3 seconds

  return <ComplexChart data={data} />;
}

async function DataTable() {
  const data = await fetchTableData(); // 1-2 seconds

  return <Table data={data} />;
}

// Result: Initial HTML sent instantly
// Charts and DataTable stream when ready
// Much better UX than traditional loading spinner!

2. Server + Client Component Composition

// app/posts/[slug]/page.tsx (Server Component)
import { CommentSection } from "./comment-section"; // Client Component
import { ShareButtons } from "./share-buttons"; // Client Component
import { RelatedPosts } from "./related-posts"; // Server Component

export default async function PostPage({ params }) {
  // Server fetch
  const post = await getPost(params.slug);
  const relatedPosts = await getRelatedPosts(post.tags);

  return (
    <article>
      {/* Static content rendered on server */}
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />

      {/* Interactive components (Client Components) */}
      <ShareButtons url={post.url} title={post.title} />
      <CommentSection postId={post.id} />

      {/* More static content (Server Component) */}
      <RelatedPosts posts={relatedPosts} />
    </article>
  );
}

// comment-section.tsx (Client Component)
"use client";

import { useState } from "react";

export function CommentSection({ postId }: { postId: string }) {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    await fetch("/api/comments", {
      method: "POST",
      body: JSON.stringify({ postId, text: newComment }),
    });

    setNewComment("");
    // Refresh comments
  };

  return (
    <div>
      <h2>Comments</h2>
      <form onSubmit={handleSubmit}>
        <textarea
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="Write a comment..."
        />
        <button type="submit">Post Comment</button>
      </form>

      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.text}</li>
        ))}
      </ul>
    </div>
  );
}

3. Smart Cache Data Fetching

// lib/data.ts
import { cache } from "react";

// React cache() automatically deduplicates requests
export const getUser = cache(async (id: string) => {
  console.log("Fetching user", id); // Log appears only once!

  const user = await db.user.findUnique({ where: { id } });
  return user;
});

// app/profile/page.tsx
export default async function ProfilePage() {
  const user = await getUser("123"); // First call

  return (
    <div>
      <UserHeader user={user} />
      <UserPosts userId={user.id} />
      <UserActivity userId={user.id} />
    </div>
  );
}

// components/user-posts.tsx
async function UserPosts({ userId }: { userId: string }) {
  const user = await getUser(userId); // Cache hit! No fetch again

  const posts = await db.post.findMany({
    where: { authorId: user.id },
  });

  return <PostList posts={posts} />;
}

// components/user-activity.tsx
async function UserActivity({ userId }: { userId: string }) {
  const user = await getUser(userId); // Cache hit again!

  const activity = await db.activity.findMany({
    where: { userId: user.id },
  });

  return <ActivityFeed activity={activity} />;
}

// Result: getUser() called 3 times in code
// But executes only 1 database query!

Performance: Real Numbers

Benchmark: Traditional App vs RSC

// Case study: E-commerce dashboard
// Metrics collected on simulated 3G connection

// ❌ Traditional approach (Client-Side Rendering)
const traditionalMetrics = {
  bundleSize: "450 KB", // Compressed JavaScript
  firstContentfulPaint: "2.8s",
  timeToInteractive: "4.2s",
  totalBlockingTime: "890ms",
  cumulativeLayoutShift: 0.15,
  lighthouseScore: 68,
};

// ✅ With React Server Components
const rscMetrics = {
  bundleSize: "85 KB", // 81% smaller!
  firstContentfulPaint: "0.9s", // 68% faster
  timeToInteractive: "1.3s", // 69% faster
  totalBlockingTime: "120ms", // 86% better
  cumulativeLayoutShift: 0.02, // 87% better
  lighthouseScore: 96, // +28 points
};

// Business impact:
// - Bounce rate: -35%
// - Conversion rate: +22%
// - SEO ranking: +15 positions
// - Server costs: -40% (fewer API calls)

Practical Optimizations

// 1. Automatic prefetching with Next.js
import Link from "next/link";

export function Navigation() {
  return (
    <nav>
      {/* Automatic prefetch on hover */}
      <Link href="/dashboard" prefetch={true}>
        Dashboard
      </Link>

      {/* Prefetch only when visible */}
      <Link href="/reports" prefetch={false}>
        Reports
      </Link>
    </nav>
  );
}

// 2. Parallel Data Fetching
export default async function ProductPage({ params }) {
  // ❌ Sequential (slow)
  // const product = await getProduct(params.id);
  // const reviews = await getReviews(params.id);
  // const related = await getRelated(params.id);
  // Total: 600ms + 400ms + 300ms = 1300ms

  // ✅ Parallel (fast)
  const [product, reviews, related] = await Promise.all([
    getProduct(params.id), // 600ms
    getReviews(params.id), // 400ms
    getRelated(params.id), // 300ms
  ]);
  // Total: max(600, 400, 300) = 600ms

  return <ProductDetails product={product} reviews={reviews} related={related} />;
}

// 3. Partial Prerendering (Next.js 14+)
// next.config.js
module.exports = {
  experimental: {
    ppr: true, // Partial Prerendering
  },
};

// app/dashboard/page.tsx
export default async function Dashboard() {
  return (
    <div>
      {/* Static part pre-rendered */}
      <StaticHeader />
      <StaticSidebar />

      {/* Dynamic part with streaming */}
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />
      </Suspense>
    </div>
  );
}

Migrating to Server Components

Gradual Migration Strategy

// Phase 1: Identify candidate components
const migrationCandidates = {
  highPriority: [
    "Components with heavy fetching",
    "Static content pages",
    "Components using large libraries",
  ],
  mediumPriority: [
    "Components without interactivity",
    "Listing/catalog pages",
  ],
  lowPriority: ["Components with little interactivity"],
  neverMigrate: [
    "Components with event handlers",
    "Components using hooks",
    "Components using browser APIs",
  ],
};

// Phase 2: Convert component by component

// BEFORE (Client Component)
// app/products/page.tsx
"use client";

import { useEffect, useState } from "react";

export default function ProductsPage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/products")
      .then((res) => res.json())
      .then((data) => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// AFTER (Server Component)
// app/products/page.tsx
export default async function ProductsPage() {
  // Direct server fetch
  const products = await fetch("https://api.example.com/products", {
    next: { revalidate: 3600 }, // Cache for 1 hour
  }).then((res) => res.json());

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Immediate benefits:
// - No useState/useEffect
// - No loading states
// - Smaller bundle
// - Better SEO (content in initial HTML)

Handling Interactivity

// Pattern: Server Component wrapper + Client Component for interactivity

// app/products/[id]/page.tsx (Server Component)
import { AddToCartButton } from "./add-to-cart-button"; // Client

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>

      {/* Pass only necessary data to Client Component */}
      <AddToCartButton
        productId={product.id}
        price={product.price}
        inStock={product.stock > 0}
      />
    </div>
  );
}

// add-to-cart-button.tsx (Client Component)
"use client";

import { useState } from "react";

export function AddToCartButton({ productId, price, inStock }) {
  const [quantity, setQuantity] = useState(1);

  if (!inStock) return <p>Out of stock</p>;

  return (
    <div>
      <input
        type="number"
        value={quantity}
        onChange={(e) => setQuantity(Number(e.target.value))}
        min="1"
      />
      <button onClick={() => addToCart(productId, quantity)}>
        Add ${price * quantity} to Cart
      </button>
    </div>
  );
}

Conclusion: The Future is Server-First

React Server Components represent a fundamental shift in React architecture:

Proven benefits:

  • Performance: 70-90% smaller bundles
  • UX: 60-80% faster Time to Interactive
  • DX: Simpler code (no complex useEffect)
  • SEO: Content in initial HTML
  • Costs: Fewer API calls, better caching

Adoption in 2025:

  • Next.js: RSC default since v13
  • Remix: Implementation in progress
  • Gatsby: Experimenting with Server Components
  • Create React App: Deprecated, migrate to modern frameworks

If you want to master modern React, I recommend checking out another article: React Trends in 2025 where you will discover other revolutionary trends in the ecosystem.

🎯 Join Developers Who Are Evolving

Thousands of developers already use our material to accelerate their studies and achieve better positions in the market.

Why invest in structured knowledge?

Learning in an organized way with practical examples makes all the difference in your journey as a developer.

Start now:

  • $4.90 (single payment)

🚀 Access Complete Guide

"Excellent material for those who want to go deeper!" - John, Developer

Comments (0)

This article has no comments yet 😢. Be the first! 🚀🦅

Add comments