はじめに

Next.js 14 の App Router では、コンポーネントはデフォルトで サーバーコンポーネント (use server) として動作します。

これにより、サーバー側でデータを取得し、SSR（サーバーサイドレンダリング）によるパフォーマンス最適化が行われます。
しかし、クライアントサイドでのインタラクティブな処理が必要な場合は use client を指定し、クライアントコンポーネントとして扱う必要があります。

本記事では、use server と use client の違い、適切な使い分けについて解説します。

1. use server と use client の違い

1.1 use server （デフォルト）

use server は、Next.js 14 App Router で デフォルトの動作 となっています。

JSX
export default function ServerComponent() {
  return <h1>これはサーバーコンポーネントです</h1>;
}

✅ 特徴

• use server の明示は不要（デフォルト）
• fetch() で直接 API を呼び出せる
• useState, useEffect などのフックは 使用不可
• クリックイベントなどの イベントハンドラは設定不可

🚀 サーバーコンポーネントに適したケース

• 初回ロード時にデータを取得し、そのまま表示する
• SEO を意識したページのレンダリング
• ユーザーごとのカスタマイズが不要な静的コンテンツ

1.2 use client （クライアントコンポーネント）

クライアントコンポーネントとして動作させるには、use client を明示する必要があります。

JSX
"use client";

import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>カウント: {count}</button>;
}

✅ 特徴

• use client を明示的に指定する必要あり
• useState, useEffect, useRef などのフックが 使用可能
• クリックイベントなどの インタラクティブな処理が可能
• サーバー側でのデータフェッチは不可（fetch はクライアント側で実行）

🚀 クライアントコンポーネントに適したケース

• ユーザーの操作が必要なボタンやフォーム
• useState を使った状態管理が必要なコンポーネント
• useEffect を使ったブラウザ API（localStorage など）の操作

2. use server と use client の適切な使い分け

2.1 可能な限り use server を使う

use client を指定すると バンドルサイズが増加し、パフォーマンスが低下する可能性がある ため、
可能な限り use server（デフォルトの状態）でコンポーネントを作成するのが推奨されます。

✅ サーバーコンポーネントで完結する処理

• API からデータを取得し、静的に表示するページ
• SEO を意識したコンテンツ（ブログ、ニュース記事など）
• サーバーサイドの処理を直接利用する機能（DB クエリなど）

2.2 クライアントでのインタラクションが必要なら use client を使う

ユーザーの操作（ボタンのクリック、フォーム入力）などが必要な場合、
use client を明示的に設定する必要があります。

✅ クライアントコンポーネントが必要なケース

• useState, useEffect を使うコンポーネント
• onClick, onChange などのイベント処理
• フォームやボタンなどの UI 操作

2.3 サーバーとクライアントの分離

ハイブリッド構成 として、use server の中で use client を使うことも可能です。

JSX
export default function ServerComponent() {
  return (
    <div>
      <h1>サーバーコンポーネント</h1>
      <ClientComponent />
    </div>
  );
}

import { useState } from "react";
("use client");
function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>カウント: {count}</button>;
}

• ✅ この方法で最適なパフォーマンスを維持しつつ、インタラクティブな UI を提供できます。

3. まとめ

Next.js 14 App Router では、デフォルトで use server が適用されますが、
インタラクティブなコンポーネントには use client を使用する必要があります。

📌 学んだこと

• use server はデフォルトで、データ取得や SSR に最適
• use client は useState やイベント処理が必要な場合に使用
• パフォーマンス最適化のため、可能な限り use server を優先

適切に使い分けて、効率的な Next.js アプリを構築しましょう。