【
一言で言うと】
ServerComponent は、「ページを開いた時、サーバーがHTMLを作って送ってくる」もの。
ClientComponentは、「ブラウザに届いてから、JavaScriptが動いてデータを取ってくるもの」
迷ったらまず、ServerComponent。
ユーザー操作でデータが変わるなら、ClientComponent
【それぞれの特徴】
ServerComponent
- 初回表示が早い
- SEO有利
- JSバンドル小
動的更新
// page.tsx (async関数でOK)
const storeName =
await getStoreNameByCode(storeCode);
return <Component storeName={storeName} />;
ClientComponent
- 動的更新⭕️
- 部分再レンダリング
初回ローディングあり
JSバンドル増加
// "use client" が必要
const { getStoreName } = useStoreNameMap();
return <div>{getStoreName(storeCode)}</div>;
【どちらを使うか?判断フロー】
Q1.ユーザーの操作でデータが動的に変わる?
Yes 
ClientComponent(ドロップダウンで店舗切り替えなど)
No(
次の質問へ)
Q2.ポーリング・WebSocketなどリアルタイム更新が必要か?
Yes ClientComponent(定期的な再取得など)
No( 次の質問へ)
Q3.親コンポーネントがすでにClientComponent?
Yes ClientComponent
No ServerComponent
【
PJでのベストプラクティス】
デフォルトは Server Component — 迷ったらまずこちら。初回表示が速く、バンドルサイズも小さい。
親ページでAPIを叩いてpropsで渡す — 子コンポーネントで毎回 use〇〇NameMap() を呼ぶと無駄なAPI呼び出しが増える。
動的更新が必要になって初めて Client Component に変更 — 最初からClientにしない。必要性が出てから切り替える。
必ずエラーハンドリングを入れる — API失敗時に 未登録を返すフォールバックを忘れずに。