📌 Introduction to React Server Components

React Server Components (RSC) are one of the most exciting innovations introduced with React 18. They unlock the ability to render components on the server without sending extra JavaScript to the client.

This article covers:

• What React Server Components are
• Why they matter
• How to use them with Next.js 13+
• Code examples and performance benefits

Let’s dive in.

---

💡 What Are React Server Components?

React Server Components (RSC) allow parts of your UI to be rendered on the server — and only on the server. Unlike SSR (Server-Side Rendering), Server Components don’t ship their code to the browser at all, which results in smaller JavaScript bundles.

✅ Key Benefits:

• Zero client-side JavaScript for Server Components
• Access to server-only resources (e.g., DB, filesystem, secrets)
• Improved performance and SEO
• Streamed rendering with React 18’s concurrent features

---

🧱 Client vs. Server Components: What’s the Difference?

Feature	Client Component	Server Component
Runs on Browser	✅	❌ (runs on server only)
Can use useState/hooks	✅	❌ (useState not allowed)
Can access DB/filesystem	❌	✅
Ships JavaScript to user	✅	❌

---

🔧 How to Use React Server Components with Next.js 13+

React Server Components require a framework-level integration. Next.js 13+ with the App Router is the best way to start.

Step 1: Use the /app directory

Next.js uses the /app directory to enable server components by default.

File structure:

/app
  /page.tsx      ← Server Component (default)
  /components
    MyClientComp.tsx ← Marked as client

Step 2: Create a Server Component

// app/page.tsx
export default async function HomePage() {
  const data = await fetchDataFromServer();

  return (
    <div>
      <h1>Welcome!</h1>
      <p>Server Data: {data.title}</p>
    </div>
  );
}

async function fetchDataFromServer() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  return res.json();
}

This file is a Server Component by default — no special annotation needed!

---

Step 3: Create a Client Component

To use React hooks or browser APIs, mark the component as a Client Component using "use client".

// app/components/Counter.tsx
'use client';

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Then import it in your server component:

import Counter from './components/Counter';

<Counter />

---

🌐 Real-World Use Cases

• Fetching private database data (e.g., prisma, mongoose)
• Integrating with file systems or APIs securely
• Rendering markdown or blog content
• Reducing JavaScript sent to the client

---

⚠️ Limitations

• Hooks like useState, useEffect, etc. are not available in Server Components.
• Server Components cannot access browser-only APIs.
• Component composition can get tricky — ensure separation of client/server logic.

---

⚡ Performance Benefits

React Server Components improve initial load time, reduce bundle sizes, and enable streaming, especially when used with frameworks like Next.js 13/14 or Remix.

Use Lighthouse or Web Vitals to measure:

• Reduced TBT (Total Blocking Time)
• Improved LCP (Largest Contentful Paint)

---

🧪 Debugging Tip

When using Server Components:

• Make sure your components folder includes "use client" in any interactive file.
• Console logs in server components show in the server terminal, not the browser.

---

📦 RSC + Data Fetching in Action

Here’s a complete example using Prisma on the server:

// app/page.tsx
import { db } from '@/lib/prisma';

export default async function ProductsPage() {
  const products = await db.product.findMany();

  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Since this is a Server Component, Prisma can be used directly — no API route needed.

---

🔚 Conclusion

React Server Components represent a major shift in how we think about building performant, scalable React apps. With frameworks like Next.js, you can get started today and take advantage of:

• Smaller bundles
• Faster performance
• Better developer experience

---

🧭 Further Reading

• React Server Components RFC
• Next.js App Router Docs
• Streaming with React 18

---

Check out our frontend category here !