Next.js App Router を触り始めたとき、Server Component と Client Component の違いがドキュメントを読んだだけではピンとこなかったので、実際に書いてわかったことをまとめます。
最初にやったミス
Server Component の中で useState を使おうとして怒られました。Pages Router に慣れていると「コンポーネント = 状態を持てる」という感覚が染み付いているので、最初は意外とやります。
設計の基本
インタラクションが必要な部分だけを Client Component に切り出す。できるだけ末端の小さいコンポーネントを Client にして、データフェッチや静的な部分は Server に留める。これを意識するようになってからパフォーマンスが体感できるくらい変わりました。
「use client」を書く場所
「use client」を書いたコンポーネントの子はすべて Client になります。大きなコンポーネントに書くと配下全体が Client 化されて Server Component のメリットが消えます。できるだけ末端に書く、というのが安定しました。
データフェッチ
Server Component では async/await をそのまま使えます。useEffect + fetch の組み合わせを書かなくていいのはシンプルで良かったです。直列フェッチになっていないかだけ注意が必要です。