はじめに

この記事では、Next.js App Router の ServerComponent と Client Component の使い分けについて整理します。

Server Component とは

サーバーサイドでのみ実行されるコンポーネント

コンポーネントのJSファイルがブラウザに送信されない
パフォーマンスが向上する
App Router のデフォルトは、Server Component

Client Component とは

ブラウザ・サーバーサイド両方で実行されるコンポーネント

Client Component から import されるコンポーネントや関連ファイルのブラウザ向けにバンドルされる
ファイル冒頭で "use client" ディレクティブを記述することで、 Client Component になる

Home.tsx

'use client'
 
import { useState } from 'react'
 
export default function Home() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

"use client" が Server Component と Client Component の境界線
- 親コンポーネントが Client Component であれば、子コンポーネントで "use client" を再宣言する必要はない

以下の例では、Client Component である Home コンポーネントの子コンポーネントとして利用されている Button コンポーネントで "use client" を再宣言しなくても Button コンポーネントは、Client Component になります。
また、Server Component である Test コンポーネントの子コンポーネントとして Button コンポーネントが利用される場合、Button コンポーネントは Server Component になります。

つまり、Button コンポーネントは親コンポーネント次第で、Client Component と Server Component のどちらになるか決まります。

Server Component と Client Component の使い分け

Server Component を使うべきケース
- データ取得
- 静的なコンテンツ
- 機密情報
Client Component を使うべきケース
- インターラクティブ（ボタンクリックなどのユーザーによる画面操作）な機能
- コンポーネントに保持した状態
- ブラウザ専用の API や Hooks

不適切な実装を行うとエラーが発生します。
例えば、以下のケースでは、Client Component でしか使用できない useState を Server Component で import しているため、エラーが表示されています。

まとめ

デフォルトは、Server Component
"use client" を宣言すれば、Client Component
Client Component に import されたファイルは Client Component になる
"use client" を必要最小限にとどめることが App Router で高パフォーマンスのWebアプリケーションを開発するためのポイント

参考

Rendering
Server and Client Components
吉井健文「実践Next.js —— App Routerで進化するWebアプリ開発エンジニア選書」技術評論社、2024