Server Components

Server Components とは

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

Server vs Client Component

Server と Client Component の違いを以下にまとめる。

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

使い分け

Server Component はサーバーで実行されるため、DB アクセスやファイル読み取りを直接行える。Client Component はブラウザで実行され、useState や onClick などのインタラクティブな機能を使う。データ取得が主な処理は Server Component、ユーザー操作を伴う処理は Client Component を選ぶ。

// 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 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 を扱う関連書籍も多い。