The Rise of Server Components: What You Need to Know

A Paradigm Shift

React Server Components (RSCs) represent a major shift in how we think about building web applications. By rendering on the server, we can significantly reduce the amount of JavaScript sent to the client.

Key Benefits

• Zero-Bundle Size: Server Components don't end up in the client-side JavaScript bundle.
• Direct Backend Access: Fetch data directly from your database or APIs without creating dedicated API endpoints.
• Improved Performance: Faster initial page loads and a more responsive user experience.

Getting Started with RSCs in Next.js

Next.js has first-class support for Server Components. By default, all components in the app directory are Server Components.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main>{/* ... */}</main>
}

When to use Client Components

You still need Client Components for interactivity. Anything that uses Hooks like useState or useEffect must be a Client Component. You opt-in by adding the "use client" directive at the top of the file.