Frontend Academy · Lesson

Server Components and Client Components

Understand React Server Components, when to add the 'use client' directive, and how to mix server-rendered HTML with interactive client islands.

Server Components and Client Components is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two Worlds in One App

React Server Components (RSC) let you split a tree between server-rendered and client-interactive parts. In Next.js App Router, components default to Server; opt into Client with 'use client'.

What Server Components Do

Server Components run only on the server. They can: fetch data directly, access the filesystem, use server-only secrets, render to HTML without shipping React to the client. They cannot: use hooks, manage state, handle events.

What Client Components Do

Client Components run on the server for SSR (initial HTML) and on the client for interactivity. They can: use useState, useEffect, event handlers, browser APIs.

Default Is Server

In Next.js App Router, every component is a Server Component by default. This is great — most of your app is static rendering.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Opt In to Client

Add 'use client' at the top of a file to mark its components (and their imports) as Client Components.

// app/Counter.tsx
'use client';

import { useState } from 'react';

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

Composing Server and Client

Server Components can render Client Components, but Client Components can't import Server Components. Pass server-rendered content as children to Client wrappers.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Why This Pattern Matters

Smaller JS bundles — only Client Components ship to the browser. Direct DB/file access — no API layer needed for read-only data. Better SEO and faster LCP — HTML arrives fully rendered.

Client Boundary Rules

Once a file is marked 'use client', all components in that file and any imported children become Client Components. The 'use client' marks a boundary between server and client.

Server Actions

Functions marked with 'use server' run only on the server but can be called from Client Components — like RPC. Often used for form submissions and mutations.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Passing Props from Server to Client

Props passed from Server to Client must be JSON-serialisable — no functions, classes, Dates with custom shapes. Convert before passing.

Identifying Each Type

Look at the imports: useState, useEffect, onClick handlers force a component to be a Client Component. Pure data display can stay Server.

Performance Wins

Server Components shrink the JS bundle dramatically. A page with mostly static content and a few interactive widgets sends only the interactive bits' JS — sometimes 90% smaller.

Quick Check

Which React hook is NOT allowed in a Next.js Server Component?

Recap: Server vs Client

Server Components: run only on server, async/await OK, no hooks/state/handlers, smaller bundles. Client Components: opt in with 'use client', interactive with useState/useEffect/events. Server can render Client; Client can't import Server (but can receive as children). Server Actions ('use server') for RPC-style mutations.

Frequently asked questions

Is the “Server Components and Client Components” lesson free?

Yes — the full text of “Server Components and Client Components” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Server Components and Client Components”?

Understand React Server Components, when to add the 'use client' directive, and how to mix server-rendered HTML with interactive client islands. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Server Components and Client Components” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy