React Server Components

Components That Never Leave the Server

React Server Components (RSC) are components that execute exclusively on the server. They never run in the browser. They never ship JavaScript to the client. They have zero impact on your bundle size.

This is a fundamental shift. Before RSC, every component — even a static <Footer> with no interactivity — shipped its JavaScript to the client for hydration. A 500-component page meant 500 components of JS downloaded, parsed, and executed in the browser, even if 400 of them just rendered static text.

What Server Components Can Do

Because they run on the server, RSC have access to things client components never will:

import { readFile } from 'fs/promises'
import { db } from '@/lib/database'

export default async function BlogPost({ slug }) {
  const post = await db.post.findUnique({
    where: { slug }
  })

  const changelog = await readFile(
    './CHANGELOG.md',
    'utf-8'
  )

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
      <details>
        <summary>Changelog</summary>
        <pre>{changelog}</pre>
      </details>
    </article>
  )
}

Notice: direct await in the component body. No useEffect, no useState, no loading states. The component is an async function that fetches data, reads files, and returns JSX. It runs on the server, renders to a special format, and the result is sent to the client.

Server Components can:

• Query databases directly (no API layer needed)
• Read the file system
• Access server-only secrets and environment variables
• Use any Node.js API or npm package (no browser compatibility needed)
• Import large libraries (syntax highlighters, markdown parsers) without bundle impact

The RSC Wire Format

Here is the thing that trips people up: Server Components don't render to HTML (that's traditional SSR). They render to a serialized React tree — a special format called the RSC payload.

// Simplified RSC payload (actual format is more compact)
0:["$","div",null,{"children":[
  ["$","h1",null,{"children":"My Blog Post"}],
  ["$","p",null,{"children":"This content was rendered on the server."}],
  ["$","$Lclient-component","abc123",{"children":"Interactive!"}]
]}]

This is not HTML. It's a description of the React element tree, serialized as a stream. The $L prefix marks a reference to a Client Component — React knows it needs to download and render that component's JavaScript on the client.

The flow looks like this:

RSC vs Traditional SSR

This distinction is critical and often confused:

Traditional SSR renders components to HTML strings on the server. The client receives HTML, displays it, then re-executes all components during hydration to rebuild React's internal state.

RSC renders components to a serialized React tree. Server Components are fully resolved — their output is static data that never re-runs on the client. Only Client Components hydrate.

Traditional SSR:
  Server: Render ALL components → HTML string
  Client: Parse HTML → download ALL JS → re-render ALL components → hydrate

RSC:
  Server: Render Server Components → serialized tree (with Client Component holes)
  Client: Parse RSC payload → download Client Component JS only → hydrate only Client Components

The key difference: with traditional SSR, the client re-executes every component. With RSC, it only executes Client Components. Server Component code never reaches the browser.

Async Server Components

One of the most powerful features: Server Components can be async. You await data directly in the component.

async function UserProfile({ userId }) {
  const user = await db.user.findUnique({ where: { id: userId } })
  const posts = await db.post.findMany({ where: { authorId: userId } })

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <h3>Posts ({posts.length})</h3>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

No useEffect. No useState. No loading state management. No error boundary wrangling. Just fetch and render. The component runs once on the server, resolves, and sends the result.

For parallel data fetching, use Promise.all:

async function Dashboard() {
  const [stats, activity, notifications] = await Promise.all([
    fetchStats(),
    fetchActivity(),
    fetchNotifications()
  ])

  return (
    <div>
      <Stats data={stats} />
      <Activity data={activity} />
      <Notifications data={notifications} />
    </div>
  )
}

Composing Server and Client Components

Server Components can render Client Components. Client Components cannot import Server Components (but they can receive them as children).

import { AddToCartButton } from './AddToCartButton'

async function ProductPage({ slug }) {
  const product = await fetchProduct(slug)

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={product.id} />
    </div>
  )
}

Here ProductPage is a Server Component that renders a Client Component (AddToCartButton). The product data is fetched on the server — only the button's JavaScript ships to the client.

The props you pass from Server to Client Components must be serializable: strings, numbers, booleans, arrays, plain objects, Dates, Maps, Sets, and typed arrays. You cannot pass functions, classes, or React elements created with JSX as props across the boundary (but you can pass children).