Jeff Bruchado
Back to blog

React 19 and Server Components: The Revolution Changing Web Development

Hello HaWkers, have you ever imagined writing React components that run exclusively on the server, drastically reducing the JavaScript sent to browsers and significantly improving performance? This has moved from concept to reality with React 19.

Have you ever wondered why some React applications load instantly while others take seconds to display the first content?

What Are React Server Components and Why Are They Revolutionary

React Server Components (RSC) are components that execute exclusively on the server, generating HTML that's sent directly to the client. Unlike traditional Server-Side Rendering (SSR), RSC allows individual components to be rendered on the server without sending their JavaScript code to the browser.

Why does this matter?

  • 40-60% smaller JavaScript bundle - server components don't go into the bundle
  • Direct backend access - query databases, internal APIs, server files
  • Faster hydration - less JavaScript to process on the client
  • Better SEO - content rendered on server from first load

In 2025, frameworks like Next.js 14+, Remix, and the new Expo Router have already adopted React Server Components as default, and companies like Vercel, Shopify, and Airbnb report 30-50% improvements in Largest Contentful Paint (LCP).

React Server Components vs Client Components: Understanding the Difference

The biggest conceptual change in React 19 is the explicit separation between Server Components and Client Components.

Server Components (Default)

// app/ProductList.jsx - Server Component (default)
import { db } from '@/lib/database';

export default async function ProductList() {
  // Run SQL queries directly - this does NOT go to the client!
  const products = await db.query(
    'SELECT * FROM products WHERE active = true ORDER BY created_at DESC LIMIT 10'
  );

  return (
    <div className="product-grid">
      {products.map((product) => (
        <article key={product.id} className="product-card">
          <img src={product.imageUrl} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <p>{product.description}</p>
        </article>
      ))}
    </div>
  );
}

Advantages:

  • ✅ Direct access to database and filesystem
  • ✅ Sensitive code (API keys, secrets) never goes to client
  • ✅ Zero JavaScript sent to browser for this component
  • ✅ Can use heavy backend libraries without affecting bundle

Client Components (Interactivity)

'use client'; // Directive marking component as client-side

import { useState } from 'react';

export function AddToCartButton({ productId, productName }) {
  const [loading, setLoading] = useState(false);
  const [added, setAdded] = useState(false);

  const handleAddToCart = async () => {
    setLoading(true);

    try {
      const response = await fetch('/api/cart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productId }),
      });

      if (response.ok) {
        setAdded(true);
        setTimeout(() => setAdded(false), 2000);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <button
      onClick={handleAddToCart}
      disabled={loading}
      className={added ? 'success' : 'primary'}
    >
      {loading ? 'Adding...' : added ? '✓ Added!' : 'Add to Cart'}
    </button>
  );
}

When to use Client Components:

  • ✅ Need hooks (useState, useEffect, useContext)
  • ✅ Event handlers (onClick, onChange, etc.)
  • ✅ Browser APIs (localStorage, window, navigator)
  • ✅ Interactivity and client state

react server components architecture

Composition: Combining Server and Client Components

The magic happens when you strategically combine Server and Client Components:

// app/ProductPage.jsx - Server Component (main page)
import { db } from '@/lib/database';
import { AddToCartButton } from './AddToCartButton'; // Client Component
import { ProductReviews } from './ProductReviews'; // Server Component

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

  // Fetch reviews in parallel
  const reviews = await db.review.findMany({
    where: { productId: params.id },
    orderBy: { createdAt: 'desc' },
    take: 5,
  });

  return (
    <main>
      <section className="product-details">
        <img src={product.imageUrl} alt={product.name} />

        <div className="product-info">
          <h1>{product.name}</h1>
          <p className="price">${product.price}</p>
          <p className="description">{product.description}</p>

          {/* Client Component for interactivity */}
          <AddToCartButton
            productId={product.id}
            productName={product.name}
          />
        </div>
      </section>

      {/* Server Component for reviews */}
      <ProductReviews reviews={reviews} productId={product.id} />
    </main>
  );
}

Result: Most of the page is rendered on the server (ready HTML), only the add-to-cart button needs JavaScript on the client.

React 19 Actions: Simplifying Data Mutations

React 19 introduced Actions, a new way to handle data mutations that eliminates much boilerplate:

Before (React 18):

'use client';

import { useState } from 'react';

export function CommentForm({ postId }) {
  const [comment, setComment] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/comments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ postId, comment }),
      });

      if (!response.ok) throw new Error('Failed to submit comment');

      setComment('');
      // Revalidate data...
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        disabled={loading}
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Submitting...' : 'Comment'}
      </button>
      {error && <p className="error">{error}</p>}
    </form>
  );
}

After (React 19 with Actions):

'use client';

import { useActionState } from 'react';
import { submitComment } from './actions';

export function CommentForm({ postId }) {
  const [state, action, isPending] = useActionState(submitComment, {
    error: null,
    success: false,
  });

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <textarea
        name="comment"
        disabled={isPending}
        placeholder="Write your comment..."
      />

      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Comment'}
      </button>

      {state.error && <p className="error">{state.error}</p>}
      {state.success && <p className="success">Comment submitted!</p>}
    </form>
  );
}
// actions.js - Server Action
'use server';

import { db } from '@/lib/database';
import { revalidatePath } from 'next/cache';

export async function submitComment(prevState, formData) {
  const postId = formData.get('postId');
  const comment = formData.get('comment');

  // Validation
  if (!comment || comment.length < 3) {
    return { error: 'Comment too short', success: false };
  }

  try {
    // Save to database
    await db.comment.create({
      data: {
        postId: parseInt(postId),
        content: comment,
        userId: getCurrentUserId(), // helper function
      },
    });

    // Revalidate page cache
    revalidatePath(`/posts/${postId}`);

    return { error: null, success: true };
  } catch (error) {
    return { error: 'Failed to save comment', success: false };
  }
}

Benefits:

  • ✅ Less boilerplate code
  • ✅ Loading/error states managed automatically
  • ✅ Progressive enhancement (works even without JavaScript)
  • ✅ Automatic cache revalidation

Streaming and Suspense: Progressive Loading

React 19 improved Streaming support, allowing parts of the page to be sent to the client as they become ready:

// app/Dashboard.jsx
import { Suspense } from 'react';
import { UserProfile } from './UserProfile';
import { RecentOrders } from './RecentOrders';
import { Analytics } from './Analytics';

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

      {/* UserProfile loads fast - renders first */}
      <Suspense fallback={<UserProfileSkeleton />}>
        <UserProfile />
      </Suspense>

      {/* RecentOrders might take time - loads after */}
      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders />
      </Suspense>

      {/* Analytics takes longest - loads last */}
      <Suspense fallback={<AnalyticsSkeleton />}>
        <Analytics />
      </Suspense>
    </main>
  );
}
// Analytics.jsx - Server Component with heavy query
import { db } from '@/lib/database';

export async function Analytics() {
  // Complex query that might take 2-3 seconds
  const stats = await db.$queryRaw`
    SELECT
      DATE(created_at) as date,
      COUNT(*) as orders,
      SUM(total) as revenue
    FROM orders
    WHERE created_at > NOW() - INTERVAL 30 DAY
    GROUP BY DATE(created_at)
    ORDER BY date DESC
  `;

  return (
    <section className="analytics">
      <h2>Last 30 Days</h2>
      {/* Render charts with stats */}
    </section>
  );
}

Result: Users see UserProfile almost instantly, RecentOrders a few milliseconds later, and Analytics when the heavy query completes - all without blocking the entire page.

React 19 Performance Optimizations

Beyond Server Components, React 19 brought several performance improvements:

1. Automatic Batching (improved)

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  const [doubled, setDoubled] = useState(0);

  const handleClick = async () => {
    // React 19: ONLY 1 re-render even with await
    const result = await fetchSomeData();

    setCount(count + 1);
    setDoubled((count + 1) * 2);
    // Both batched automatically
  };

  return <button onClick={handleClick}>Count: {count} | Doubled: {doubled}</button>;
}

2. Ref as Prop

// Before (React 18)
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// After (React 19) - ref is normal prop!
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

3. useOptimistic Hook

'use client';

import { useOptimistic } from 'react';
import { likePost } from './actions';

export function LikeButton({ postId, initialLikes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (state, increment) => state + increment
  );

  const handleLike = async () => {
    // Update UI optimistically (instant)
    addOptimisticLike(1);

    // Make real request (can fail)
    await likePost(postId);
  };

  return (
    <button onClick={handleLike}>
      ❤️ {optimisticLikes} likes
    </button>
  );
}

Advantage: UI responds instantly, even before server confirms.

Challenges and Considerations When Adopting React 19

Despite massive benefits, there are important challenges:

1. Learning Curve

Thinking about Server vs Client Components requires a mindset shift. Common questions:

  • "Where can I use useState?" → Only in Client Components
  • "Can I fetch in Server Components?" → Yes, with async/await directly
  • "How to pass functions to Server Components?" → Can't, use Server Actions

2. Library Compatibility

Many popular React libraries don't yet support Server Components:

// ❌ ERROR: This library doesn't support Server Components
import { SomeLibrary } from 'legacy-library';

export default function Page() {
  return <SomeLibrary />; // Will break
}

// ✅ SOLUTION: Create Client Component wrapper
'use client';

import { SomeLibrary } from 'legacy-library';

export function LegacyWrapper(props) {
  return <SomeLibrary {...props} />;
}

3. More Complex Debugging

Errors can happen on server or client. React 19 improved error boundaries and messages, but there's still a learning curve.

4. Caching and Revalidation

Understanding when and how to revalidate cached data is crucial:

'use server';

import { revalidatePath, revalidateTag } from 'next/cache';

export async function updateProduct(productId, data) {
  await db.product.update({
    where: { id: productId },
    data,
  });

  // Option 1: Revalidate specific path
  revalidatePath(`/products/${productId}`);

  // Option 2: Revalidate all pages with tag
  revalidateTag('products');
}

Conclusion: React 19 Is the Future (and Present)

React 19 with Server Components represents React's biggest evolution since hooks. The combination of superior performance, improved Developer Experience, and cleaner architecture is making companies migrate rapidly.

Real numbers from companies that adopted RSC:

  • Vercel: 40% reduction in JavaScript, 35% improvement in LCP
  • Shopify: 50% less bundle size, 28% improvement in Time to Interactive
  • Airbnb: 45% reduction in hydration time

If you're starting a new React project in 2025, React 19 with Server Components should be your default choice. For legacy projects, consider gradual migration using Next.js App Router or Remix.

Next steps:

  1. Try Next.js 14+ with App Router (native Server Components)
  2. Refactor heavy components to Server Components
  3. Use Client Components only where interactivity is needed
  4. Adopt Server Actions for data mutations

If you feel inspired by React 19, I recommend checking out another article: Vue 3 vs React 2025 where you'll discover how Vue 3 compares to the new React.

Let's go! 🦅

🎯 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