React server components

React continues to evolve to support better performance and scalability. One of the latest and most impactful features introduced is React Server Components (RSC). Designed to run on the server, these components aim to improve application performance by reducing client-side JavaScript and speeding up time-to-interactive.

What are react server components?

React Server Components (RSC) are a type of component that runs only on the server. Unlike traditional React components that are rendered on the client (or hydrated after SSR), Server Components never send their code or logic to the browser.

They render HTML on the server and stream it to the client, without shipping the component’s JavaScript bundle—saving bandwidth and improving load times.

Key characteristics

• No client-side JavaScript for server components.
• Runs only on the server, has access to backend resources.
• Can fetch data directly from a database or API without exposing sensitive logic.
• Can be combined with client components for interactivity when needed.

Server vs client components

When to use server components

You should use Server Components when:

1. Rendering static or dynamic content that doesn't need interactivity.
2. Accessing secure backend resources directly from the component.
3. Reducing JavaScript bundle size and improving performance.
4. Rendering large lists or data-heavy components that don't require client-side logic.

For example, product listings, blog posts, or dashboards with read-only data are ideal candidates for RSC.

When to use client components

Client Components are still essential for:

• Interactivity (forms, modals, dropdowns, animations)
• Event handling
• Stateful UI behavior

These components run in the browser and can be combined with Server Components using the use client directive.

Example: combining server and client components in next.js 14

// app/page.tsx (Server Component)
import ProductList from './ProductList';

export default function Page() {
  return (
    <div>
      <h1>Products</h1>
      <ProductList />
    </div>
  );
}

// app/ProductList.tsx (Server Component)
import { getProducts } from '../lib/db';

export default async function ProductList() {
  const products = await getProducts();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

// app/AddToCartButton.tsx (Client Component)
'use client';

export default function AddToCartButton({ productId }) {
  return (
    <button onClick={() => console.log(`Add ${productId} to cart`)}>
      Add to cart
    </button>
  );
}

Benefits of using server components

• 🚀 Faster Load Times: Less JS sent to the browser.
• 🔐 Secure Data Fetching: Database access stays on the server.
• ⚡ Improved SEO: More complete content on initial load.
• 📦 Smaller Bundle Sizes: Better performance on slow connections.

Limitations

• No access to browser APIs (e.g., window, localStorage).
• No interactivity—must delegate to Client Components for that.
• Currently best supported in Next.js 13+ and React 18+ environments.

Conclusion

React Server Components are a game-changer for performance-focused React applications. By keeping non-interactive components on the server and only using client components where necessary, you can significantly improve your app’s load time and scalability. This hybrid approach is the future of modern web development with React.