What are React Server Components (RSC), and how do they fundamentally differ from SSR?

Short answer

RSCs run only on the server and send no JavaScript for those components to the client, unlike SSR, which sends JavaScript for every component to hydrate.

Explanation

With traditional SSR, component code renders initial HTML on the server, but the component's JavaScript must also be sent to the browser for Hydration. Server Components run only on the server, can directly access databases and the file system, and send a serialized representation (RSC Payload) with zero bytes of JavaScript for those components.

Code example

// This component runs only on the server and ships no JS to the browser
import db from '@/lib/db';

export async function ProductReviewList({ productId }: { productId: string }) {
  // Direct database query without creating API endpoint
  const reviews = await db.reviews.findMany({ where: { productId } });

  return (
    <div>
      {reviews.map(r => (
        <p key={r.id}>{r.comment}</p>
      ))}
    </div>
  );
}

Common mistakes

• Believing RSC removes the need for Client Components; interactive components (with onClick and useState) still require "use client".

Follow-up questions

• What is the "use client" directive, and when should it be used in an RSC architecture?
• What is Hydration, and what commonly causes a Hydration Mismatch?

Sources

• React docs — Server Components