React Server Components: A Paradigm Shift

Server Components Basics

React Server Components move part of the component tree back to the server. Instead of shipping every component and every dependency to the browser, the server can render pieces that only need data access and markup.

Core Idea

A server component can read from databases, files, or internal services without creating an extra client-side API layer. The result sent to the browser is a compact representation that React can merge with interactive client components.

Performance Benefits

The main win is less client JavaScript. If a component never needs browser state, event handlers, or effects, it does not need to become part of the client bundle.

Using the Pattern

In the Next.js App Router, components are server components by default. Add 'use client' only when a component needs browser-only behavior.

Data Fetching

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

Client Boundaries

'use client'
import { useState } from 'react'

export function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Practical Rules

1. Keep data-heavy components on the server when possible.
2. Move interactivity into small client islands.
3. Put data fetching close to the UI that consumes it.
4. Use streaming and suspense when progressive rendering improves the user experience.