React Server Components

What are Server Components?

React Server Components (RSC) are a new paradigm for building React applications. In NextJS App Router, all components are Server Components by default.

Server Components render exclusively on the server (or at build time) and never ship JavaScript to the client.

Key Benefits

Zero Bundle Size

Server Components don’t add to client JavaScript bundle

Direct Backend Access

Access databases, file systems, and APIs directly

Better Performance

Less JavaScript to download and parse

Automatic Code Splitting

Only client components are split and loaded

Server vs Client Components

Let’s examine the difference with real examples from the course:

Server Component Example

components/RSCDemo.js

export default async function RSCDemo() {
  console.log('RSCDemo rendered');
  return (
    <div className="rsc">
      <h2>A React Server Component</h2>
      <p>
        Will <strong>ONLY</strong> be rendered on the server or at build time.
      </p>
      <p>
        <strong>NEVER</strong> on the client-side!
      </p>
    </div>
  );
}

Server Component Characteristics

Can be async functions
Can access backend resources directly
Cannot use React hooks (useState, useEffect, etc.)
Cannot use browser APIs
Render once on the server
Console logs appear in terminal, not browser

Client Component Example

components/ClientDemo.js

'use client';

import { useState } from 'react';

export default function ClientDemo({ children }) {
  const [count, setCount] = useState(0); // <- this is why it's a client component

  console.log('ClientDemo rendered');
  return (
    <div className="client-cmp">
      <h2>A React Client Component</h2>
      <p>
        Will be rendered on the client <strong>AND</strong> the server.
      </p>
      {children}
    </div>
  );
}

The 'use client' directive must be at the top of the file before any imports.

When to Use Each

Use Server Components for:

Data Fetching

Fetch data directly from databases or APIs

Static Content

Display content that doesn’t need interactivity

Backend Logic

Access server-only resources (file system, secrets)

Large Dependencies

Keep heavy libraries on the server

Use Client Components for:

Interactivity

Event handlers (onClick, onChange, etc.)

State Management

useState, useReducer, useContext

Effects

useEffect, useLayoutEffect

Browser APIs

localStorage, window, document

Composing Server and Client Components

You can nest Server Components inside Client Components, but only as props:

app/page.js

import ClientDemo from '@/components/ClientDemo';
import RSCDemo from '@/components/RSCDemo';

export default function Home() {
  return (
    <main>
      <ClientDemo>
        <RSCDemo />
      </ClientDemo>
    </main>
  );
}

Pass Server Components as children or props to Client Components. This preserves the server-only nature of the nested component.

Data Fetching with Server Components

Server Components can be async and fetch data directly:

components/DataFetchingDemo.js

import fs from 'node:fs/promises';

export default async function DataFetchingDemo() {
  const data = await fs.readFile('dummy-db.json', 'utf-8');
  const users = JSON.parse(data);

  return (
    <div className="rsc">
      <h2>RSC with Data Fetching</h2>
      <p>
        Uses <strong>async / await</strong> for data fetching.
      </p>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.title})
          </li>
        ))}
      </ul>
    </div>
  );
}

Notice how we import fs from Node.js directly! This code only runs on the server, so we have full access to server-side APIs.

Real-World Example: Meals Page

Let’s look at a complete example from the Foodies app:

app/meals/page.js

import Link from 'next/link';
import classes from './page.module.css';
import MealsGrid from '@/components/meals/meals-grid';
import { getMeals } from '@/lib/meals';

export default async function MealsPage() {
  const meals = await getMeals();

  return (
    <>
      <header className={classes.header}>
        <h1>
          Delicious meals, created{' '}
          <span className={classes.highlight}>by you</span>
        </h1>
        <p>
          Choose your favorite recipe and cook it yourself. It is easy and fun!
        </p>
        <p className={classes.cta}>
          <Link href="/meals/share">
            Share Your Favorite Recipe
          </Link>
        </p>
      </header>
      <main className={classes.main}>
        <MealsGrid meals={meals} />
      </main>
    </>
  );
}

Why this is a Server Component

No 'use client' directive
Declared as async function
Directly calls getMeals() which queries a database
No interactivity or browser APIs needed
Renders once on server, sent as HTML to client

Streaming with Suspense

Server Components work seamlessly with React Suspense for progressive rendering:

app/meals/page.js

import { Suspense } from 'react';
import Link from 'next/link';
import classes from './page.module.css';
import MealsGrid from '@/components/meals/meals-grid';
import { getMeals } from '@/lib/meals';

async function Meals() {
  const meals = await getMeals();
  return <MealsGrid meals={meals} />;
}

export default function MealsPage() {
  return (
    <>
      <header className={classes.header}>
        <h1>
          Delicious meals, created{' '}
          <span className={classes.highlight}>by you</span>
        </h1>
        <p>
          Choose your favorite recipe and cook it yourself. It is easy and fun!
        </p>
        <p className={classes.cta}>
          <Link href="/meals/share">Share Your Favorite Recipe</Link>
        </p>
      </header>
      <main className={classes.main}>
        <Suspense fallback={<p className={classes.loading}>Fetching meals...</p>}>
          <Meals />
        </Suspense>
      </main>
    </>
  );
}

Instant Shell

Page shell renders immediately

Show Fallback

Suspense boundary displays loading state

Stream Data

Data fetching happens in parallel

Replace Content

Real content replaces fallback when ready

Error Handling

Create an error.js file to handle errors in Server Components:

app/meals/error.js

'use client';

export default function Error() {
  return (
    <main className="error">
      <h1>An error occurred!</h1>
      <p>Failed to fetch meal data. Please try again later.</p>
    </main>
  );
}

Error boundaries must be Client Components because they use React hooks internally (useEffect for error reporting).

Loading States

Create a loading.js file for automatic loading UI:

app/meals/loading.js

export default function Loading() {
  return (
    <div className="loading">
      <p>Loading meals...</p>
    </div>
  );
}

NextJS automatically wraps your page in a Suspense boundary using loading.js as the fallback.

Component Decision Tree

Does it need interactivity?

If YES → Client Component ('use client')If NO → Continue to step 2

Does it use React hooks?

If YES → Client Component ('use client')If NO → Continue to step 3

Does it access browser APIs?

If YES → Client Component ('use client')If NO → Continue to step 4

Default to Server Component

Keep it as a Server Component for better performance

Best Practices

Keep Client Components Small

Only add 'use client' to the smallest components that need it. This minimizes client JavaScript bundle size.

Fetch Data as Close as Possible

Fetch data in the component that needs it, not in a parent layout. This enables better streaming and parallel data fetching.

Use Server Components by Default

Start with Server Components and only add 'use client' when you need interactivity or browser APIs.

Leverage Composition

Pass Server Components as children to Client Components to preserve their server-only nature.

Performance Comparison

Aspect	Client Components	Server Components
Bundle Size	Adds to bundle	Zero bundle impact
Initial Load	Slower (more JS)	Faster (less JS)
Data Fetching	Client-side fetch	Server-side fetch
Interactivity	Full interactivity	None
Re-rendering	On state changes	Only on navigation
Backend Access	Via APIs only	Direct access

Get Started

Core Concepts

Styling & UI

State Management

Advanced Topics

NextJS

Testing & TypeScript

Production

Practice Projects

What are Server Components?

Key Benefits

Zero Bundle Size

Direct Backend Access

Better Performance

Automatic Code Splitting

Server vs Client Components

Server Component Example

Client Component Example

When to Use Each

Use Server Components for:

Use Client Components for:

Composing Server and Client Components

Data Fetching with Server Components

Real-World Example: Meals Page

Streaming with Suspense

Error Handling

Loading States

Component Decision Tree

Best Practices

Performance Comparison

Next Steps

Server Actions

Data Fetching Patterns

Build docs developers (and LLMs) love

Get Started

Core Concepts

Styling & UI

State Management

Advanced Topics

NextJS

Testing & TypeScript

Production

Practice Projects

​What are Server Components?

​Key Benefits

Zero Bundle Size

Direct Backend Access

Better Performance

Automatic Code Splitting

​Server vs Client Components

​Server Component Example

​Client Component Example

​When to Use Each

​Use Server Components for:

​Use Client Components for:

​Composing Server and Client Components

​Data Fetching with Server Components

​Real-World Example: Meals Page

​Streaming with Suspense

​Error Handling

​Loading States

​Component Decision Tree

​Best Practices

​Performance Comparison

​Next Steps

Server Actions

Data Fetching Patterns

Build docs developers (and LLMs) love

What are Server Components?

Key Benefits

Server vs Client Components

Server Component Example

Client Component Example

When to Use Each

Use Server Components for:

Use Client Components for:

Composing Server and Client Components

Data Fetching with Server Components

Real-World Example: Meals Page

Streaming with Suspense

Error Handling

Loading States

Component Decision Tree

Best Practices

Performance Comparison

Next Steps