Next.js App RouterにおけるServer Components/Client Componentsの設計術を解説する記事です。App RouterのコンポーネントはデフォルトではServer Componentとして扱われる仕組みを踏まえ、'use client'は必要最小限、つまりインタラクティブ性が必要な「葉(リーフ)」の部分だけに留めるべきだと主張しています。
最上位のコンポーネントで'use client'を記述すると、配下のすべてのコンポーネントがクライアントバンドルに含まれてしまい、バンドルサイズが膨らむ問題が指摘されています。対策として、可能な限りServer Components側でデータフェッチを行うこと、フォーム処理にはServer Actionsを活用してAPI Routesの作成を減らすことが推奨されています。
出典が伝えている要点
- Next.js App Routerのコンポーネントはデフォルトでは Server Component として扱われる
- 'use client' は必要最小限にとどめ、インタラクティブ性が必要な「葉（リーフ）」の部分だけを Client Component 化すべきとされている
- 最上位のコンポーネントで 'use client' を記述すると、配下のすべてのコンポーネントがクライアントバンドルに含まれる
- 上記の結果としてバンドルサイズが膨らむと述べられている
- 可能な限り Server Components 側でデータフェッチを行うことが推奨されている
- フォーム処理に Server Actions を活用することで API Routes の作成を減らせるとされている
原文より
デフォルトはServer Component、インタラクティブ性が必要な部分だけをClient Componentにする
出典: zenn.dev