でじぼうです。
Next.js を使っていると、ファイルの先頭に "use client" と書かれているのを見かけることがあります。
このキーワードには、とても重要な意味があります。この記事では、初心者エンジニア向けに「サーバーコンポーネント」と「クライアントコンポーネント」の違いと、どんなときに "use client" を書くのか解説します！
この記事は下記の方がおすすめ！
- use clientってなに？
- サーバーコンポーネントってなに？
- クライアントコンポーネントってなに？
Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち
サーバーコンポーネントとは？
Next.js では、特に何も書かないコンポーネントは「サーバーコンポーネント」として扱われます。
- サーバー上で実行される（ユーザーのブラウザでは動かない）
- セキュアにデータを扱える
- F12（開発者ツール）でコードを見ることができない
export default function MyComponent() {
// サーバー側で実行される
return <div>サーバーから描画されました</div>;
}クライアントコンポーネントとは？
"use client" をファイルの先頭に書くと、そのコンポーネントは「クライアントコンポーネント」として動きます。
- ブラウザ側で実行される
- ボタンクリックやフォーム送信などの動作ができる
- 開発者ツールで中身が見える（HTMLやJS）
"use client";
export default function ClientComponent() {
const handleClick = () => alert("クリックされました");
return <button onClick={handleClick}>クリック</button>;
}一度クライアントになると、すべてクライアント扱いに！
親が “use client” を持つとどうなる？
ある親コンポーネントが "use client" を持っていると、 その中に書かれたすべての子コンポーネントも「クライアントコンポーネントとして使われる前提」で動くことになります。
つまり、サーバーで処理したいコードも、クライアント側に送られてしまう可能性があるということです。
途中でサーバーに戻せるのか？
"use client" を途中で解除することはできません。
一度そのファイルに "use client" を書くと、そのファイル全体がクライアントコンポーネントとして確定し、途中で "use server" のように戻すことはできません。
サーバー処理をしたいときはどうする？
サーバー側で処理させたいロジックがある場合は、別ファイルのサーバーコンポーネントとして切り出すことが必要です。
"use client" を持っていると、 その中に書かれたすべての子コンポーネントも「クライアントコンポーネント」として扱われます。
つまり、サーバーで処理したいコードも、クライアント側に送られてしまう可能性があるということです。
よりセキュアにしたいときは？
フォーム送信などで await fetch("/api/contact", {...}) のような処理をすることがあります。 この処理を「クライアントコンポーネント内で実行」すると、リクエスト内容がF12で見えてしまうことがあります。
よりセキュアにしたい場合は、
- ユーザー入力（例：名前やメール）をクライアント側で受け取る
- それを
API Route（サーバー側）に送って処理する という構成にしましょう
まとめ
| 項目 | サーバーコンポーネント | クライアントコンポーネント |
|---|---|---|
"use client" 必要か | ❌ 不要 | ✅ 必要 |
| 実行される場所 | サーバー上 | ブラウザ上 |
| F12で見えるか | ❌ 見えない | ✅ 見える |
| できること | データ取得や表示のみ | ボタン操作・イベント・状態管理などが可能 |
コメント