Server Components

Server Components とは

React Server Components (RSC) は、サーバーで実行されるコンポーネントで、JavaScript がクライアントに送信されない。DB アクセスや API キーの使用がサーバーで安全に行え、バンドルサイズが削減される。Next.js App Router ではデフォルトで全コンポーネントが Server Component。

Server vs Client Component

観点	Server Component	Client Component
実行場所	サーバー	ブラウザ
JS バンドル	含まれない	含まれる
DB アクセス	✅ 直接可能	❌ API 経由
useState / useEffect	❌ 使えない	✅ 使える
イベントハンドラ	❌ 使えない	✅ 使える
宣言	デフォルト	'use client'

使い分け

// Server Component (デフォルト): DB アクセス、データ取得
async function UserList() {
  const users = await db.users.findMany(); // サーバーで直接 DB アクセス
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// Client Component: インタラクティブな UI
'use client';
function SearchBox() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// 組み合わせ
async function Page() {
  return (
    <div>
      <SearchBox />       {/* Client Component */}
      <UserList />        {/* Server Component */}
    </div>
  );
}

バンドルサイズへの影響

従来の SSR:
  サーバーで HTML 生成 → クライアントに全 JS を送信 → Hydration

Server Components:
  サーバーで HTML 生成 → Client Component の JS のみ送信
  Server Component の JS は送信されない → バンドルサイズ削減

Server Actions

// Server Action: サーバーで実行される関数
async function createUser(formData: FormData) {
  'use server';
  await db.users.create({
    name: formData.get('name') as string,
    email: formData.get('email') as string,
  });
}

// Client Component から呼び出し
'use client';
function CreateUserForm() {
  return (
    <form action={createUser}>
      <input name="name" />
      <input name="email" />
      <button type="submit">Create</button>
    </form>
  );
}

判断基準

コンポーネント	推奨
データ取得、DB アクセス	Server Component
静的な表示	Server Component
フォーム、ボタン、入力	Client Component
useState, useEffect が必要	Client Component
重いライブラリ (チャート等)	Client Component (lazy load)

Server Components を扱う関連書籍も多い。