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