Server and Client

Last updated Oct 12, 2026100% grounded

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.

// 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.

// 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.

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.

Data Fetching and Mutation

Was this page helpful?

Routing and Navigation

Data Fetching and Mutation