Server Components

Learn what server components are and how they differ.

Server Components

Server Components (RSC) render on the server and ship no JavaScript to the browser. They can directly access databases, the file system and private APIs.

RSC cannot use useState, useEffect or browser APIs. If you need interactivity, that piece becomes a Client Component.

This split keeps the JavaScript bundle small and speeds up the first load.

use client directive

If you put "use client" at the top of a file, all components in that file become Client Components. They can use useState, useEffect and event handlers.

A Server Component can import Client Components; the reverse is not allowed. This boundary optimizes performance.

Splitting interactive pieces into small Client Components is best practice.

Exercise Client Counter

Write a Counter component with "use client" at the top. Keep n in useState(0), render <button onClick={() => setN(n + 1)}>{n}</button>. export default Counter.

Show example solution

// app/counter.js
"use client";
import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Test yourself

Which hook is NOT allowed in RSC?
- console.log
- fetch
- useState
- async/await
Show answer

useState — useState is not allowed in RSC; RSC is not interactive.

use client directive

"____"

import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Show answer

"use client"

import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Server Components: match the terms

Server Component

Server render
Client Component

Interactive
"use client"

Directive
useState

Client only

Next lesson: Summary - SSR and SSG

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies