Understanding React Server Components

React Server Components (RSC) are a groundbreaking feature introduced to improve the performance of React applications by enabling rendering on the server side. They are especially useful in frameworks like Next.js 13+ with the App Router.

What are Server Components?

Server Components are React components that run only on the server and do not add any JavaScript to the client bundle. They are useful for non-interactive parts of your UI, like headers, footers, blog posts, or data fetched from databases.

Why Use Server Components?

How They Work in Next.js

To define a Server Component, simply avoid 'use client' at the top:

// This is a Server Component by default in App Router
export default function PostList() {
  const posts = getPostsFromDB()
  return (
    

      {posts.map(post => (
        
{post.title}
      ))}
    
  )
}

Nesting with Client Components

While Server Components don’t support useState, you can mix them with client components for interactivity:

// Client Component
'use client'
export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false)
  return  setLiked(!liked)}>{liked ? 'Liked' : 'Like'}
}

// Server Component
import { LikeButton } from './LikeButton'
export default function Post({ post }) {
  return (
    

      
{post.title}
      
{post.content}
      
    
  )
}

Limitations

Advanced Usage

Server-side Data Fetching with Prisma

import prisma from '@/lib/prisma'
export default async function Users() {
  const users = await prisma.user.findMany()
  return (
    

      {users.map(user => (
        
{user.email}
      ))}
    
  )
}

Streaming Components

import { Suspense } from 'react'
import { PostList } from './PostList'
export default function Page() {
  return (
    Loading...
}>
      
    
  )
}

When to Use Server vs Client

| Feature | Server Component | Client Component | |---------------------|------------------|------------------| | Data fetching | ✅ | ❌ | | Form handling | ✅ | ✅ | | Interactivity | ❌ | ✅ | | SEO optimization | ✅ | ❌ | | Access to browser | ❌ | ✅ |

Best Practices

1. Use for static or data-heavy UIs like dashboards, reports, blogs. 2. Combine with Client Components for interactivity. 3. Use Suspense and streaming for a smoother UX. 4. Don’t overuse: not every component needs to be on the server.

Conclusion

React Server Components are a powerful tool to improve scalability and performance. They encourage a more efficient rendering model where only what’s necessary is sent to the client. With proper usage, they make apps faster, lighter, and more maintainable.