What is React Server Components (RSC) in App Router?

React Server Components (RSC) are a new React feature that allows components to be rendered on the server. In the App Router, components are Server Components by default.

Server Components (default):

// app/page.js - This is a Server Component
async function ServerComponent() {
  const data = await fetch("https://api.example.com/data");
  const result = await data.json();

  return (
    <div>
      <h1>Server Rendered Data</h1>
      <p>{result.message}</p>
    </div>
  );
}

Client Components (opt-in with "use client"):

// app/components/ClientComponent.js
"use client";

import { useState } from "react";

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

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

Benefits of Server Components:

• Direct access to server-side resources (databases, file system)
• No JavaScript bundle sent to client
• Improved performance and SEO
• Automatic code splitting

When to use Client Components:

• Interactive features (event handlers, state)
• Browser-only APIs (localStorage, geolocation)
• React hooks (useState, useEffect)