Technical
React Server Components: What Backend Developers Need to Know
React Server Components (RSC) confused me until I realized they are basically what backend developers have been doing for twenty years: rendering HTML on the server. The twist is that they live inside a React application. Here is the practical guide.
The Key Insight
Traditional React: everything runs in the browser. The server sends a blank HTML page and a JavaScript bundle. The browser downloads, parses, and executes the JavaScript to render the UI. Slow on first load, especially on mobile.
Server Components: components run on the server and send rendered HTML to the browser. No JavaScript bundle for those components. The browser gets ready-to-display HTML instantly.
Traditional React:
Server -> empty HTML + big JS bundle -> browser renders UI
Server Components:
Server -> rendered HTML (no JS for server parts) -> browser displaysServer vs Client Components
In Next.js App Router, every component is a server component by default. Add 'use client' at the top of a file to make it a client component.
// This is a Server Component (default)
// It runs on the server, can access databases, has no JS sent to browser
export default async function PostList() {
const posts = await fetch('http://api.example.com/posts');
const data = await posts.json();
return <ul>{data.map(p => <li key={p.slug}>{p.title}</li>)}</ul>;
}// This is a Client Component
'use client';
// It runs in the browser, can use state, events, and browser APIs
export default function SearchBar() {
const [query, setQuery] = useState('');
return <input value={query} onChange={e => setQuery(e.target.value)} />;
}When to Use Which
| Component Type | Use When | |---------------|----------| | Server Component | Fetching data, reading files, accessing databases | | Server Component | Rendering static or semi-static content | | Client Component | Handling user interactions (clicks, forms, typing) | | Client Component | Using browser APIs (localStorage, geolocation) | | Client Component | Managing state that changes without a page reload |
The Mental Model for Backend Developers
If you come from Django, Flask, or FastAPI, think of Server Components as template rendering with React syntax. You fetch data on the server, pass it to the component, and render HTML. The only difference is that the template language is JSX instead of Jinja2 or Django templates.
The important part: Server Components can be async. They can await database queries, API calls, and file reads directly in the component body. No useEffect, no loading states, no client-side data fetching for initial page loads.
The Practical Rule
Start with Server Components for everything. Only add 'use client' when you need user interaction (clicks, form input, state changes). This gives you the best performance with the least JavaScript sent to the browser.
See the Next.js Server Components documentation for the complete guide.
RELATED READING
The Consulting Shift I Am Making In Year Two
After a year of writing and building, my consulting practice is changing shape. Shorter engagements. Sharper outcomes.
ReadThe Frontend Shift: Shipping Less JavaScript In Year Two
A year ago I reached for Next.js for everything. This year I often reach for nothing.
ReadThe Serverless Lesson I Would Write On A Sticky Note
After a year of shipping serverless projects, one rule explains most of the wins and all of the losses.
Read