App RouterではデフォルトがServer Components。"use client"ディレクティブを追加するとClient Componentになる。
// Server Component（デフォルト）
// ✅ async/await でデータ取得
// ✅ バックエンドリソースへの直接アクセス
// ✅ バンドルサイズに影響しない
// ❌ useState, useEffect 等のフックは使えない
// ❌ ブラウザAPIは使えない
async function UserList() {
// サーバー側で直接DBアクセスも可能
const users = await fetch('https://api.example.com/users').then(r => r.json());
return <ul>{users.map((u: User) => <li key={u.id}>{u.name}</li>)}</ul>;
}
// ─────────────────────────────────────────
// Client Component
'use client'; // このディレクティブが必要
// ✅ フック（useState, useEffect 等）が使える
// ✅ ブラウザAPIが使える
// ✅ イベントハンドラが使える
// ❌ async Component は使えない（React 19では緩和）
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}"use client"はコンポーネントツリーの境界を定義する。境界より下のコンポーネントはすべてClient Componentになる。可能な限りサーバー側に処理を寄せると高速化できる。