Step 2 — Server vs Client Components

Core App Router shift: every component is a Server Component by default. Add 'use client' only when you need clicks, typing, or state.

Server Component (default)

async function getMessage() {
  return { text: "Built on the server" };
}

export default async function Home() {
  const data = await getMessage(); // runs on server
  return <p>{data.text}</p>;
}

async components are allowed. fetch results are cached.

Client Component

"use client";
import { useState } from "react";

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

Anything browser-only (useState, onClick, window) needs 'use client'.

Compose them

import Counter from "./counter";

export default function Home() {
  return (
    <main>
      <p>Server text</p>
      <Counter />
    </main>
  );
}

Next

Step 3: API Route + Drizzle ORM →