React 19 & Server Components: Is the Browser or the Server Rendering?

Browser or server—who renders now?

React 19 marks one of the framework’s biggest architectural shifts.
Server Components (RSC) are officially stable. Some components render entirely on the server and never ship client-side JavaScript.

Sounds like magic, right? ✨
It’s actually the web’s natural evolution. Let’s unpack it.

Classic model (Client Components)

function Hello() {
  return <h1>Hello Client!</h1>
}

⚠️ Problem: bundles grow huge on large apps; startup slows.

New model: Server Components (RSC)

// Server Component
export default async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Traits of a Server Component

Mixing Client & Server Components

// 📁 app/page.jsx
import Posts from './Posts.server';
import LikeButton from './LikeButton.client';

export default function Page() {
  return (
    <main>
      <Posts />
      <LikeButton />
    </main>
  );
}

• Posts.server → Server Component (fetches, returns HTML).
• LikeButton.client → Client Component (interactivity).

How RSC works

Benefits:

• Smaller JS bundles
• Less client rendering
• A better SSR–SPA balance

Real-world example (Next.js 15)

// app/posts/page.jsx
export default async function Page() {
  const posts = await getPosts();
  return (
    <>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
    </>
  );
}

'use client'
export function LikeButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>❤️ {count}</button>;
}

Result: the page may ship ~3 KB of JS—only for the button.

Pros & watch-outs

✅ Advantages

• Dramatically smaller JS bundles
• Faster data access on the server
• Better security (keys stay server-side)
• Excellent SEO (HTML is complete)

Considerations

• useEffect/useState aren’t available in server components.
• Share data with client components via props.
• Pay attention to cache strategy.

Data flow with RSC

export default async function ProductList() {
  const products = await fetch('/api/products').then(r => r.json());
  return <div>{products.map(p => <Product key={p.id} {...p} />)}</div>;
}

Performance impact

• ~30% faster TTFB on average
• Up to 40% smaller bundles
• Shorter hydration = lower CPU

More in React 19

• use() hook → await async data directly in components
• Actions API → handle form submits on the server
• Suspense integrates tightly with data fetching

export default function Page() {
  const data = use(fetchData());
  return <div>{data.title}</div>;
}

Conclusion

In short:

• Server Components = less JS, more speed
• Client Components = interactivity and animation
• Using both together = the future of the web