TS
Next.js 15 — The Complete Guide

React Server Components

React Server Components (RSC) fundamentally change the React architecture in Next.js. They execute exclusively on the server, meaning they ship zero JavaScript to the browser.

Because they never run on the client, you can securely access your database or backend microservices directly from the component body without creating a separate API route.

By default, all components in the Next.js App Router are Server Components. You only opt-in to Client Components (which do ship JS and can use state/effects) by adding the "use client" directive at the top of the file.

SnippetTSX
class=class="ttk-str">"ttk-cmt">// This is a Server Component by default
import db from class="ttk-str">'@/lib/db';

export default async function ProductList() {
  class=class="ttk-str">"ttk-cmt">// Direct database access! Secure and fast.
  const products = await db.product.findMany();

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

Lesson Insights

Server components run only on the server and ship zero JS to the client

You can use modern async/await directly inside Server Components

All components in the app directory are Server Components by default

Related Knowledge