Next.jsのApp RouterでServer ComponentとClient Componentの使い分けが分からない

Answers (1)

• Yuki✓ Best answer6/1/2026

  基本方針は「デフォルトは全部Server Component、必要な場所だけClient Componentにする」です。

  Client Componentが必要になるのは主に次のケースです。

  • useState/useEffectなどReactのフックを使う
  • onClickなどのイベントハンドラが必要
  • ブラウザ専用API（window, localStorage等）を使う
  • Context APIを使う

  逆に、データ取得だけして表示するだけのコンポーネントはServer Componentのままにしておくと、JSバンドルサイズが減ってパフォーマンスが良くなります。よくあるパターンとして、ページ全体はServer Componentにしておき、ボタンやフォームなどインタラクティブな部分だけを小さいClient Componentに切り出す設計にすると綺麗にまとまります。