React Server Components Explained for Practical Developers
A no-jargon explanation of React Server Components — what they are, when to use them, and how they change the way you build Next.js applications.
What are Server Components?
React Server Components (RSC) are React components that run exclusively on the server. They render to HTML on the server, and the resulting markup is sent to the browser. No JavaScript bundle for that component is shipped to the client.
In Next.js 15, every component is a Server Component by default. You only add 'use client' when a component needs browser APIs like useState, useEffect, or event handlers. This is the opposite of how React worked before — and it's a better default.
Why this matters for performance
Before RSC, a React app shipped all component code to the browser as JavaScript. A page with a header, sidebar, content area, and footer would send the code for all four components — even if none of them were interactive.
With Server Components, only interactive components ship JavaScript. A typical page might have 80% server components and 20% client components. That means 80% less JavaScript for the browser to download, parse, and execute. Pages load faster, especially on slow connections and older devices.
When to use Server Components
Use Server Components for anything that doesn't need interactivity: layouts, headers, footers, content sections, data display, blog posts, product listings. These components render once and don't change based on user input.
Server Components can also directly access databases, file systems, and environment variables. Need to fetch data? Just use await in the component body — no useEffect, no loading state, no API route. The data is fetched on the server and embedded in the HTML.
When to use Client Components
Add 'use client' when your component needs: useState or useReducer for local state, useEffect for side effects, onClick/onChange/onSubmit event handlers, browser APIs like localStorage or window, or third-party libraries that use these features.
Common examples: form inputs, dropdown menus, modal dialogs, toast notifications, dark mode toggles, search bars with autocomplete. Anything the user interacts with.
The composition pattern
The key insight is that Server Components can render Client Components, but not the other way around. This means your page layout is a Server Component, and interactive pieces are Client Components embedded within it.
Think of it like a document with interactive widgets. The document (layout, headings, text, images) is server-rendered. The widgets (forms, buttons, dropdowns) are client-rendered. The document doesn't need JavaScript. The widgets do.
Practical example
Consider a product page. The layout, product description, images, and specifications are Server Components — they just display data. The 'Add to Cart' button, quantity selector, and size picker are Client Components — they handle user input.
In Next.js, this is natural. Your page.tsx is a Server Component that renders ProductInfo (server) and AddToCartButton (client). The product data is fetched on the server and passed as props. No loading spinners, no layout shift, no waterfall requests.
Stop overthinking it
The practical rule is simple: start with Server Components (the default). When you need interactivity, add 'use client' to that specific component. Keep client components small and focused. Don't wrap your entire app in 'use client' — that defeats the purpose.
Every template we build at Popeki follows this pattern. The layout and content sections are server-rendered for speed. Interactive elements like forms, modals, and menus are client components. It's the right architecture for almost every web application. Need a custom-built application? We build those too.
Need a custom version?
We build it for you.
Custom web applications, business systems, and marketing sites — built to your exact specifications. Projects starting from $2K.