Getting Started
Core Concepts
Troubleshooting
Choosing between React Server Components and Client Components is a key part of building web applications that load quickly and remain responsive. By default, components in your application are Server Components, which run entirely on the server. When you need interactivity, browser-specific features, or state management, you can switch specific parts of your application to Client Components.
Understanding how and when to use each component type helps you balance performance, bundle size, and user experience.
To decide which component type to use, it helps to understand where they run and what capabilities they offer.
Server Components execute on the server. They have direct access to server-side resources such as databases, internal services, and the file system. Because they render entirely on the server, they add zero JavaScript bundle weight to the user's browser, improving initial page load performance.
Client Components execute in the user's web browser. They are required when you need to handle user interactions, manage browser state, or use browser-only APIs like window dimensions or local storage.
Use the following comparison to determine whether a feature belongs in a Server Component or a Client Component:
| Fetching data from a database or internal service | Server Component |
| Reducing the amount of JavaScript sent to the browser | Server Component |
| Keeping sensitive access tokens or API keys secure | Server Component |
| Handling user interactions (clicks, text input, form submissions) | Client Component |
Managing local state or side effects (useState, useEffect) | Client Component |
Using browser-only APIs (window, localStorage, geolocation) | Client Component |
Tip
Keep your components as Server Components by default. Only opt into Client Components when your UI explicitly requires interactivity or browser-specific APIs.
To designate a component as a Client Component, add a specific instruction directive to the very top of the file, before any imports.
'use client'Warning
Placing 'use client' at the top of a file imports that entire component subtree into the browser bundle. Try to push the boundary down as far as possible in your component tree—ideally right around the specific interactive elements—rather than marking entire layout files as client components unnecessarily.