Server and Client Components

By default, layouts and pages are Server Components, which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need interactivity or browser APIs, you can use Client Components to layer in functionality.
This page explains how Server and Client Components work in Next.js and when to use them, with examples of how to compose them together in your application.
For an explanation of where each component type runs and how the boundary works, see The Server and Client Boundary.
The client and server environments have different capabilities. Server and Client Components allow you to run logic in each environment depending on your use case.
Use Client Components when you need:
Use Server Components when you need:
For example, the <Page> component is a Server Component that fetches data about a post, and passes it as props to the <LikeButton> which handles client-side interactivity.
On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks, by individual route segments (layouts and pages), including parallel route slots whether or not they are displayed:
What is the React Server Component Payload (RSC)?
The RSC Payload is a compact, serialized representation of the rendered React Server Components tree. It's used by React on the client to update the browser's DOM. The RSC Payload contains:
Then, on the client:
Hydration is React's process for attaching event handlers to the DOM, to make the static HTML interactive.
On subsequent navigations:
You can create a Client Component by adding the "use client" directive at the top of the file, above your imports.
"use client" is used to declare a boundary between the Server and Client module graphs (trees).
Once a file is marked with "use client", all of its imports and the components it directly renders are included in the client bundle. This means you don’t need to add the directive to every component that is intended for the client.
This behavior applies to components that are part of the Client Component’s module graph, which includes the modules it imports and the components it renders directly. It does not apply to Server Components passed as children or other props. Those components are not imported into the Client Component’s module graph. They are rendered on the server and passed to the Client Component as rendered output.
See Interleaving Server and Client Components for how Server and Client Components can be combined.
To reduce the size of your client JavaScript bundles, add 'use client' at the top of the files that define your interactive components instead of marking large parts of your UI as Client Components.
For example, the <Layout> component contains mostly static elements like a logo and navigation links, but includes an interactive search bar. <Search /> needs to be a Client Component, while the rest of the layout can stay a Server Component.
You can pass data from Server Components to Client Components using props.
Alternatively, you can stream data from a Server Component to a Client Component with the use API. See an example.
Props passed to Client Components need to be serializable by React.
You can pass Server Components as a prop to a Client Component. This allows you to visually nest server-rendered UI within Client components.
A common pattern is to use children to create a slot in a <ClientComponent>. For example, a <Cart> component that fetches data on the server, inside a <Modal> component that uses client state to toggle visibility.
Then, in a parent Server Component (e.g.<Page>), you can pass a <Cart> as the child of the <Modal>:
In this pattern, Server Components are rendered on the server ahead of time, even when passed as props to Client Components. The React Server Component Payload contains the rendered result of those Server Components, plus placeholders for where Client Components should be rendered and references to their JavaScript files.
React context is commonly used to share global state like the current theme. However, React context is not supported in Server Components.
To use context, create a Client Component that accepts children:
Then, import it into a Server Component (e.g. layout):
Your Server Component will now be able to directly render your provider, and all other Client Components throughout your app will be able to consume this context.
You should render providers as deep as possible in the tree – notice how ThemeProvider only wraps {children} instead of the entire <html> document. This makes it easier for Next.js to optimize the static parts of your Server Components.
To pass server-fetched data through context and read it in Client Components with use(), see Using React's use within a Context Provider.
When using a third-party component that relies on client-only features, you can wrap it in a Client Component to ensure it works as expected.
For example, the <Carousel /> can be imported from the acme-carousel package. This component uses useState, but the module that defines it doesn't yet have the "use client" directive.
If you use <Carousel /> within a Client Component, it will work as expected:
However, if you try to use it directly within a Server Component, you'll see an error. This is because Next.js doesn't know <Carousel /> is using client-only features.
To fix this, you can wrap third-party components that rely on client-only features in your own Client Components:
Now, you can use <Carousel /> directly within a Server Component:
Advice for Library Authors