What are Server Components in React?
React Server Components (RSC) are components that execute only on the server. Instead of sending their JavaScript code to the browser, the server renders them into a special React payload, which is then combined with Client Components to produce the final UI.
They are primarily used to:
- Fetch data directly from databases or APIs.
- Render static or data-heavy UI.
- Reduce the amount of JavaScript sent to the browser.
- Improve page load performance.
Note – Server Components are available in frameworks that support them, such as Next.js using the App Router.
What are Client Components?
Client Components run in the browser and are responsible for interactive features such as:
- State (
useState) - Effects (
useEffect) - Event handlers (
onClick) - Browser APIs (
localStorage,window) - Animations
In Next.js, a component becomes a Client Component by adding: “use client”;
Rendering Differences
| Server Components | Client Components |
| Browser requests the page. Server executes the component. Data is fetched on the server. HTML (plus the React Server Component payload) is sent to the browser. Browser displays the content. | Browser downloads the JavaScript bundle. React loads the component. Component executes in the browser. Event listeners are attached. User interactions update the UI. |
When to Use Each
Use Server Components when you need to:
- Fetch data from a database or backend.
- Display dashboards, product listings, or blog content.
- Reduce JavaScript bundle size.
- Improve SEO and initial page load performance.
Use Client Components when you need to:
- Handle clicks, forms, and user input.
- Manage local state.
- Use effects or browser APIs.
- Create interactive UI such as modals, dropdowns, and animations.
Why were Server Components introduced?
Server Components were introduced to:
- Reduce JavaScript bundle size.
- Improve initial page load performance.
- Fetch data on the server.
- Keep sensitive logic and secrets on the server.
- Improve SEO and Time to First Byte (TTFB).
Can Server Components use React Hooks?
Only hooks that don’t require client-side state or effects are supported.
Not supported :
useStateuseEffectuseReduceruseLayoutEffect
Supported :
- Async data fetching
- Rendering JSX
Server Components render once on the server and do not stay alive after the response is sent. Since there is no persistent component instance in the browser, they cannot maintain interactive state.
Can Server Components access a database directly?
Yes. They execute on the server, so they can directly query databases, read files, or call backend services without exposing credentials to the client.
Can Server Components contain Client Components?
Yes.
Can Client Components import Server Components?
No. A Client Component cannot import a Server Component because the server-only code isn’t available in the browser.
.
How are Server Components rendered?
Rendering process:
- Browser requests the page.
- Server executes Server Components.
- Data is fetched.
- React generates a Server Component payload.
- Browser receives HTML and the payload.
- Client Components are hydrated for interactivity.
.
What is hydration?
Hydration is the process where React attaches JavaScript behavior and event listeners to server-rendered HTML, making interactive Client Components functional.
.
What happens to the JavaScript of a Server Component?
It is not included in the client bundle. Only the rendered output and metadata required by React are sent to the browser.
.
Can Server Components use browser APIs?
No. They cannot use:
windowdocumentlocalStoragesessionStoragenavigator
These APIs exist only in the browser.
.
How do Server Components improve performance?
They:
- Reduce JavaScript downloads.
- Reduce parsing and execution time.
- Fetch data closer to the data source.
- Improve First Contentful Paint (FCP).
- Improve Time to Interactive (TTI) by keeping the client bundle smaller.
.
Are Server Components rendered on every request?
Not necessarily. It depends on the framework and caching strategy. For example, in Next.js, a route may be rendered dynamically on each request or reused from a cache, depending on how it’s configured.
.
