βeta
All articles

React Server Components: The Future of React

React Server Components represent a fundamental shift in how we think about React applications. By rendering components on the server, we can reduce bundle sizes, improve performance, and create better user experiences.

What Are React Server Components?

React Server Components (RSC) are a new type of component that runs exclusively on the server. Unlike traditional SSR, Server Components:

  • Render on the server and send HTML to the client
  • Have zero JavaScript bundle impact - they don't add to client-side bundle size
  • Can access server-side resources directly (databases, file systems, etc.)
  • Compose seamlessly with Client Components

Server vs Client Components

Understanding the distinction is crucial:

// Server Component (default in App Router)
async function ServerComponent() {
  // This runs on the server
  const data = await fetch('https://api.example.com/data')
  const posts = await data.json()

  return (
    <div>
      <h1>Latest Posts</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

// Client Component (requires 'use client' directive)
'use client'

import { useState } from 'react'

function ClientComponent() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

Benefits of Server Components

1. Reduced Bundle Size

Server Components don't ship JavaScript to the client:

// This entire component and its dependencies
// add 0 bytes to the client bundle
import { formatDate } from 'date-fns' // Large library
import { Markdown } from 'markdown-renderer' // Another large library

async function BlogPost({ slug }) {
  const post = await getPost(slug)

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{formatDate(new Date(post.date), 'MMMM d, yyyy')}</time>
      <Markdown content={post.content} />
    </article>
  )
}

2. Direct Server Access

Access databases, file systems, and APIs directly:

import { db } from '@/lib/database'
import { readFile } from 'fs/promises'

async function UserProfile({ userId }) {
  // Direct database access - no API route needed
  const user = await db.user.findUnique({
    where: { id: userId },
    include: { posts: true }
  })

  // Direct file system access
  const userConfig = await readFile(`/configs/${userId}.json`, 'utf-8')

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Posts: {user.posts.length}</p>
      <pre>{userConfig}</pre>
    </div>
  )
}

Composition Patterns

Server Component with Client Component Children

// Server Component
async function Layout({ children }) {
  const user = await getCurrentUser()

  return (
    <div>
      <header>
        <h1>Welcome, {user.name}</h1>
      </header>
      <main>
        {children} {/* Can be Server or Client Components */}
      </main>
    </div>
  )
}

// Client Component
'use client'

function InteractiveWidget() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Widget
      </button>
      {isOpen && <div>Widget Content</div>}
    </div>
  )
}

// Usage
function Page() {
  return (
    <Layout>
      <InteractiveWidget />
    </Layout>
  )
}

Passing Server Data to Client Components

Server Components can pass data to Client Components as props:

// Server Component
async function ProductPage({ id }) {
  const product = await getProduct(id)
  const reviews = await getReviews(id)

  return (
    <div>
      <ProductDetails product={product} />
      <ReviewSection reviews={reviews} />
    </div>
  )
}

// Client Component
'use client'

function ReviewSection({ reviews }) {
  const [sortBy, setSortBy] = useState('newest')

  const sortedReviews = reviews.sort((a, b) => {
    if (sortBy === 'newest') return new Date(b.date) - new Date(a.date)
    if (sortBy === 'rating') return b.rating - a.rating
    return 0
  })

  return (
    <div>
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
        <option value="newest">Newest</option>
        <option value="rating">Highest Rated</option>
      </select>
      {sortedReviews.map(review => (
        <div key={review.id}>
          <p>{review.content}</p>
          <span>Rating: {review.rating}/5</span>
        </div>
      ))}
    </div>
  )
}

Advanced Patterns

Conditional Client Components

Only render Client Components when needed:

// Server Component
async function ArticlePage({ slug }) {
  const article = await getArticle(slug)
  const user = await getCurrentUser()

  return (
    <article>
      <h1>{article.title}</h1>
      <div>{article.content}</div>

      {/* Only render interactive components for authenticated users */}
      {user && <LikeButton articleId={article.id} initialLikes={article.likes} />}
    </article>
  )
}

// Client Component
'use client'

function LikeButton({ articleId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes)
  const [isLiked, setIsLiked] = useState(false)

  const handleLike = async () => {
    const response = await fetch(`/api/articles/${articleId}/like`, {
      method: 'POST'
    })
    const data = await response.json()
    setLikes(data.likes)
    setIsLiked(!isLiked)
  }

  return (
    <button onClick={handleLike} className={isLiked ? 'liked' : ''}>
      ❤️ {likes}
    </button>
  )
}

Server Actions

Use Server Actions for form handling and mutations:

// Server Component with Server Action
async function CreatePostForm() {
  async function createPost(formData) {
    'use server'

    const title = formData.get('title')
    const content = formData.get('content')

    await db.post.create({
      data: { title, content }
    })

    redirect('/posts')
  }

  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <textarea name="content" placeholder="Post content" required />
      <button type="submit">Create Post</button>
    </form>
  )
}

Data Fetching Strategies

Parallel Data Fetching

async function Dashboard() {
  // These requests happen in parallel
  const [user, posts, analytics] = await Promise.all([
    getUser(),
    getPosts(),
    getAnalytics()
  ])

  return (
    <div>
      <UserProfile user={user} />
      <PostsList posts={posts} />
      <AnalyticsChart data={analytics} />
    </div>
  )
}

Waterfall Prevention

// ❌ Bad: Sequential fetching
async function BadExample({ userId }) {
  const user = await getUser(userId)
  const posts = await getPosts(user.id) // Waits for user first

  return <UserPosts user={user} posts={posts} />
}

// ✅ Good: Parallel fetching
async function GoodExample({ userId }) {
  const userPromise = getUser(userId)
  const postsPromise = getPosts(userId)

  const [user, posts] = await Promise.all([userPromise, postsPromise])

  return <UserPosts user={user} posts={posts} />
}

Streaming and Suspense

Server Components work seamlessly with Suspense for streaming:

import { Suspense } from 'react'

function App() {
  return (
    <div>
      <Header />
      <Suspense fallback={<div>Loading posts...</div>}>
        <PostsList />
      </Suspense>
      <Suspense fallback={<div>Loading analytics...</div>}>
        <AnalyticsWidget />
      </Suspense>
    </div>
  )
}

async function PostsList() {
  // This can take time, but won't block other components
  const posts = await getPostsSlowly()

  return (
    <div>
      {posts.map(post => <Post key={post.id} post={post} />)}
    </div>
  )
}

Best Practices

1. Use Server Components by Default

Start with Server Components and only add 'use client' when you need:

  • State management (useState, useReducer)
  • Event handlers (onClick, onChange)
  • Browser APIs (localStorage, window)
  • React lifecycle hooks (useEffect)

2. Optimize Data Fetching

// ✅ Good: Fetch close to where data is used
async function ProductCard({ productId }) {
  const product = await getProduct(productId)

  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  )
}

// ❌ Avoid: Fetching all data at the top level
async function ProductList({ productIds }) {
  const products = await Promise.all(
    productIds.map(id => getProduct(id))
  )

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

3. Handle Errors Gracefully

import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error }) {
  return (
    <div role="alert">
      <h2>Something went wrong:</h2>
      <pre>{error.message}</pre>
    </div>
  )
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Suspense fallback={<Loading />}>
        <DataComponent />
      </Suspense>
    </ErrorBoundary>
  )
}

Common Pitfalls

  1. Don't use Client Component hooks in Server Components
  2. Don't pass functions as props from Server to Client Components
  3. Be careful with sensitive data - it's serialized and sent to the client
  4. Don't forget the 'use client' directive when you need client-side features

React Server Components represent a significant evolution in React development, enabling us to build faster, more efficient applications by leveraging the server for rendering while maintaining the interactive capabilities of client-side React where needed.

React Server Components: The Future of React