---
title: "Server component"
slug: "server-component"
category: "glossary"
tags: ["glossary", "frontend", "react", "ssr", "rendering", "nextjs"]
status: "stable"
last_updated: 2026-05-14
summary: "A React Server Component renders on the server only, ships zero client-side JS, and can access server resources like databases and file systems directly."
related:
  [
    "[[frontend/react]]",
    "[[frontend/nextjs]]",
    "[[glossary/hydration]]",
    "[[glossary/suspense-boundary]]",
    "[[glossary/virtual-dom]]",
    "[[glossary/code-splitting]]",
  ]
---

## Overview

This page is the atomic definition. The React and Next.js deep-dives cover RSC usage patterns.

## Definition

React Server Components (RSCs) are components that run only on the server. They can `await` database queries, read files, and import large server-only libraries without any of that code reaching the browser. The server renders them to a serialized format (the RSC payload), which the client React runtime stitches into the component tree. RSCs have no state, no effects, and no event handlers; interactivity requires a Client Component (marked `"use client"`). The result: zero JavaScript shipped to the client for the Server Component itself, smaller bundles, and reduced Time to Interactive. Next.js App Router makes every component a Server Component by default; adding `"use client"` opts into the browser runtime. Mixing RSC and Client Components requires care: a Server Component can import Client Components but not vice versa (use composition to pass server data via props).

## When it applies

Use Server Components for data-fetching, layout, and static rendering. Use Client Components for interactive UI (forms, animated elements, browser APIs). Treat `"use client"` as a boundary between server and browser rendering, not as a "this component is slow" flag.

## Example

```tsx
// app/products/page.tsx - Server Component, no "use client"
export default async function ProductsPage() {
  const products = await db.query("SELECT * FROM products LIMIT 50")
  return <ProductList products={products} />
}
```

No `useEffect`, no `fetch` on the client, no JSON serialization overhead beyond the RSC payload.

## Related concepts

- [[frontend/react]] - the full React rendering model that RSC extends.
- [[frontend/nextjs]] - Next.js App Router is the primary RSC runtime.
- [[glossary/hydration]] - RSCs do not hydrate; only Client Components hydrate.
- [[glossary/suspense-boundary]] - Suspense wraps async RSC data for streaming.
- [[glossary/virtual-dom]] - RSCs skip the VDOM entirely for their own render.

## Citing this term

> See [[glossary/server-component|Server component]] (llmbestpractices.com/glossary/server-component).

## Related

- [[frontend/react]]
- [[frontend/nextjs]]
- [[glossary/hydration]]
- [[glossary/suspense-boundary]]
- [[glossary/virtual-dom]]