React Server Components (RSC) Guide 2026: Architecture & Patterns

// ✅ Server Component (default)
async function DashboardPage() {
  // Direct database access - stays on server
  const stats = await db.analytics.getStats();
  const users = await db.users.getRecent();

  return (
    <div>
      <h1>Dashboard</h1>
      {/* Static content rendered on server */}
      <StatsDisplay stats={stats} />
      {/* Interactive chart is a Client Component */}
      <InteractiveChart data={stats.timeseries} />
      {/* Data table with sorting/filtering */}
      <UserTable users={users} />
    </div>
  );
}

import { Suspense } from 'react';

async function ProductPage({ params }) {
  // Fast data loads immediately
  const product = await getProduct(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <img src={product.image} alt={product.name} />

      {/* Show product info immediately */}
      <ProductDetails product={product} />

      {/* Stream slow data with loading state */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={params.id} />
      </Suspense>
    </div>
  );
}

// This component loads slowly but doesn't block the page
async function Reviews({ productId }) {
  // Slow API call - but page already rendered
  const reviews = await fetchReviews(productId);
  return <ReviewList reviews={reviews} />;
}

// Each component fetches its own data
async function BlogPost({ slug }) {
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      {/* Child component fetches related data */}
      <RelatedPosts category={post.category} />
      <Comments postId={post.id} />
    </article>
  );
}

async function RelatedPosts({ category }) {
  const posts = await getPostsByCategory(category);
  return <PostList posts={posts} />;
}

async function Comments({ postId }) {
  const comments = await getComments(postId);
  return <CommentList comments={comments} />;
}

// Server Component - Page shell
export default async function ProductsPage({ searchParams }) {
  // Server-side data fetching
  const products = await db.products.findMany({
    where: { category: searchParams.category },
    include: { reviews: true, inventory: true }
  });

  const categories = await db.categories.findMany();
  const featuredProducts = await db.products.featured();

  return (
    <div className="container mx-auto py-8">
      <header className="mb-8">
        <h1 className="text-4xl font-bold">Products</h1>
        {/* Static breadcrumbs - server rendered */}
        <Breadcrumbs category={searchParams.category} />
      </header>

      <div className="grid grid-cols-4 gap-6">
        {/* Sidebar with filters - Client Component for interactivity */}
        <aside className="col-span-1">
          <FilterSidebar
            categories={categories}
            currentCategory={searchParams.category}
          />
        </aside>

        <main className="col-span-3">
          {/* Featured banner - Server Component */}
          <FeaturedBanner products={featuredProducts} />

          {/* Product grid - Client Component for sorting/filtering */}
          <ProductGrid products={products} />
        </main>
      </div>
    </div>
  );
}

// Client Component for interactive filters
'use client';
import { useRouter, useSearchParams } from 'next/navigation';

function FilterSidebar({ categories, currentCategory }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const handleCategoryChange = (categoryId) => {
    const params = new URLSearchParams(searchParams);
    params.set('category', categoryId);
    router.push(`/products?${params.toString()}`);
  };

  return (
    <div className="space-y-4">
      {categories.map(cat => (
        <button
          key={cat.id}
          onClick={() => handleCategoryChange(cat.id)}
          className={currentCategory === cat.id ? 'active' : ''}
        >
          {cat.name}
        </button>
      ))}
    </div>
  );
}

// Client Component for interactive product grid
'use client';
import { useState } from 'react';

function ProductGrid({ products }) {
  const [sortBy, setSortBy] = useState('name');

  const sorted = [...products].sort((a, b) => {
    if (sortBy === 'price') return a.price - b.price;
    if (sortBy === 'rating') return b.rating - a.rating;
    return a.name.localeCompare(b.name);
  });

  return (
    <>
      <div className="mb-4">
        <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="name">Name</option>
          <option value="price">Price</option>
          <option value="rating">Rating</option>
        </select>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {sorted.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </>
  );
}

import { Suspense } from 'react';

export default async function DashboardPage() {
  // Fast critical data - loads immediately
  const user = await getCurrentUser();
  const quickStats = await getQuickStats(user.id);

  return (
    <div className="dashboard">
      {/* Instant render - no waiting */}
      <DashboardHeader user={user} stats={quickStats} />

      {/* Stream heavy data independently */}
      <div className="grid grid-cols-2 gap-6 mt-8">
        <Suspense fallback={<ChartSkeleton />}>
          <RevenueChart userId={user.id} />
        </Suspense>

        <Suspense fallback={<ChartSkeleton />}>
          <UserGrowthChart userId={user.id} />
        </Suspense>
      </div>

      {/* Low-priority content streams last */}
      <Suspense fallback={<TableSkeleton />}>
        <RecentTransactions userId={user.id} />
      </Suspense>

      <Suspense fallback={<div>Loading activity...</div>}>
        <ActivityFeed userId={user.id} />
      </Suspense>
    </div>
  );
}

// Slow data component - doesn't block page render
async function RevenueChart({ userId }) {
  // Simulate slow analytics query (2-3 seconds)
  const data = await analytics.getRevenue(userId, {
    startDate: '2025-01-01',
    aggregation: 'daily'
  });

  // Return Client Component with the data
  return <RevenueChartClient data={data} />;
}

// Loading skeleton for better UX
function ChartSkeleton() {
  return (
    <div className="h-64 bg-slate-800 rounded-lg animate-pulse" />
  );
}

import { cache } from 'react';
import { unstable_cache } from 'next/cache';

// React cache - deduplicates requests within a single render
export const getUser = cache(async (userId: string) => {
  console.log('Fetching user:', userId); // Only logs once per render
  const user = await db.user.findUnique({ where: { id: userId } });
  return user;
});

// Next.js cache - persists across requests with revalidation
export const getProducts = unstable_cache(
  async (category?: string) => {
    const products = await db.products.findMany({
      where: category ? { category } : undefined,
      include: { images: true }
    });
    return products;
  },
  ['products'], // Cache key
  {
    revalidate: 3600, // Revalidate every hour
    tags: ['products'] // For on-demand revalidation
  }
);

// Usage across components - automatically deduplicated
async function UserProfile({ userId }) {
  const user = await getUser(userId); // First call
  return <div>{user.name}</div>;
}

async function UserSettings({ userId }) {
  const user = await getUser(userId); // Returns cached result
  return <div>{user.email}</div>;
}

async function UserActivity({ userId }) {
  const user = await getUser(userId); // Returns cached result
  const activity = await getActivity(userId);
  return <div>...</div>;
}