---
title: "Server and Client"
description: "When building your user interface, choosing between Server Components and Client Components helps you balance performance, bundle size, and interactivity."
last_updated: "2026-10-12T06:40:49.088149+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/server-and-client"
---

## Overview

### Introduction

When building your user interface, choosing between **Server Components** and **Client Components** helps you balance performance, bundle size, and interactivity. 

* **Server Components** execute entirely on the server. They let you securely fetch data from databases, access local server resources, and keep large dependencies out of the browser bundle, sending only lightweight HTML to the user.
* **Client Components** execute in the browser. They allow you to add interactivity, handle browser-specific events (such as clicks or form submissions), and use browser APIs or stateful hooks.

---

### Understanding the Differences

To decide which component type to use, consider what your code needs to do:

| Feature / Capability | Server Components | Client Components |
| :--- | :--- | :--- |
| **Where it runs** | Server only | Browser (and server during initial HTML generation) |
| **Data fetching** | Direct access to databases, filesystems, and internal microservices | Via API requests or server actions |
| **Interactivity & State** | None (stateless rendering) | Full support for state (`useState`) and effects (`useEffect`) |
| **Browser APIs** | Not available | Fully available (e.g., `window`, `localStorage`) |
| **JavaScript bundle size** | Excluded from the browser bundle | Included in the browser bundle |

> [!TIP]
> By default, all components in the app directory are **Server Components**. This ensures optimal performance out of the box because code is processed on the server and sent as clean HTML.

---

### When to Use Server Components

Use Server Components for the majority of your UI, especially when you want to:

* **Fetch data securely:** Connect directly to your database, internal APIs, or file system without exposing API keys or database credentials to the browser.
* **Reduce bundle size:** Keep heavy libraries (such as markdown parsers or date formatters) on the server so the user's browser does not have to download and execute them.
* **Improve initial page load:** Render static or data-driven content instantly on the server before sending it to the client.

```tsx
// Example of a Server Component using cache guidance
function Timestamp() {
  "use cache"
  return <time>{Date.now()}</time>
}
```

---

### When to Use Client Components

Switch to a Client Component when your UI requires browser-specific features or user interaction. You mark a component as a Client Component by placing the `"use client"` directive at the very top of the file.

Use Client Components when you need:

* **Interactivity and Event Listeners:** Handling user clicks, form inputs, or mouse movements using event handlers like `onClick`.
* **State and Lifecycle Hooks:** Managing component state or side effects using React hooks.
* **Browser APIs:** Accessing browser-only objects like `window`, `localStorage`, or `navigator`.

```tsx
// Example of a Client Component using hooks
"use client"
import { useSearchParams } from 'next/navigation'

export default function Page() {
  const searchParams = useSearchParams()
  searchParams.get('foo')
}
```

> [!WARNING]
> Adding `"use client"` does not mean the component *only* runs in the browser. Client Components are still prerendered on the server to generate initial HTML, and then hydrated in the browser. Avoid accessing browser-only global variables (like `window`) during the initial render phase to prevent hydration errors.

---

### Combining Server and Client Components

You can nest Client Components inside Server Components to get the best of both worlds. For example, you can have a Server Component fetch data or layout structure and pass it down to an interactive Client Component.

```mermaid
graph TD
    A[Server Component: Fetches Data & Renders Shell] --> B[Server Component: Layout & Structure]
    B --> C[Client Component: Interactive UI & Hooks]
```

> [!IMPORTANT]
> You cannot import a Server Component directly inside a Client Component because server-only code cannot execute in the browser. Instead, pass Server Components down as children props to Client Components if you need to wrap interactive UI around server-rendered content.

## Related

- [Data Fetching and Mutation](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/data-fetching-and-mutation)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.