Modern React Patterns: Server Components and Beyond

The React Renaissance

React Server Components represent the biggest shift in React architecture since hooks. Understanding these patterns is essential for building performant modern applications.

Server Components Fundamentals

Server Components run exclusively on the server:

// This component never ships to the client
async function BlogPosts() {
const posts = await db.posts.findMany();
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

Benefits

Zero client-side JavaScript for static content

Direct database access without API routes

Smaller bundles as dependencies stay server-side

The "use client" Boundary

Mark components that need interactivity:

"use client";
import { useState } from "react";
export function LikeButton({ postId }) {
const [likes, setLikes] = useState(0);
return (
<button onClick={() => setLikes(l => l + 1)}>
{likes} likes
</button>
);
}

Composition Patterns

Pattern 1: Server Wrapper, Client Island

// Server Component
async function ProductPage({ id }) {
const product = await getProduct(id);
return (
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
<AddToCartButton productId={id} /> {/ Client /}
</div>
);
}

Pattern 2: Passing Server Data to Client

async function Dashboard() {
const data = await fetchAnalytics();
return <InteractiveChart data={data} />;
}

Streaming and Suspense

Progressively render content:

export default function Page() {
return (
<main>
<Header />
<Suspense fallback={<PostsSkeleton />}>
<BlogPosts />
</Suspense>
<Footer />
</main>
);
}

Conclusion

Server Components are not a replacement for client components. They are a new tool that, when combined with existing patterns, enables better performance and developer experience.