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 displays

Server 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}&lt;/li>)}&lt;/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.