Next.jsのレンダリング戦略とServer/Client Componentの使い分け

※本記事は React 18 / Next.js 13 以降の App Router に基づく内容です。

🪞 はじめに
Next.js を使っていると、「サーバーコンポーネント？ クライアントコンポーネント？ SSR？ CSR？ 結局どれを使えばいいの？」と悩むことがありますよね。

本記事では、Next.js の最新のレンダリング戦略について整理しながら、Server Component / Client Component の使い分けやパフォーマンス設計について実例ベースで深掘りしていきます。

🧭 Next.js のレンダリング戦略の変遷

時代	特徴
Next.js ～12	SSR を実現するには getServerSideProps が必要だった。クライアントサイド中心の構成。
Next.js 13～（App Router）	SSR がデフォルト化。RSC（React Server Components）導入によりサーバー中心の設計が可能に。

⚙️ サーバーコンポーネントとは
app/ ディレクトリ配下で use client が指定されていないコンポーネントは、サーバーコンポーネントとして扱われます。

✅ サーバーコンポーネントのメリット
データ取得が高速：データソースに近い場所（サーバー）で処理。

セキュリティ：トークンやAPIキーなどの機密情報をクライアントに渡さない。

キャッシュ最適化：静的な出力が可能でパフォーマンス向上。

ストリーミング：チャンク単位でレスポンスを返せる。

SEO に強い：サーバー側で HTML が生成されるため、検索エンジンやSNSカードに強い。

💡 クライアントコンポーネントとは

'use client'

export default function Button() {
  return <button onClick={...}>Click</button>;
}

このように明示的に use client をつけたコンポーネントは クライアント側で JavaScript により実行されるコンポーネントです。

✅ クライアントコンポーネントの用途
状態管理（useState, useReducer）

ライフサイクル（useEffect）

イベント処理（onClick, onChange）

ブラウザAPI（localStorage, window など）

📌 サーバー / クライアントコンポーネントの使い分けマトリクス

必要なこと	Server Component	Client Component
データ取得	✅	⛔（手動で fetch）
機密情報を扱う	✅	⛔
大きな依存関係を隠す	✅	⛔
UIのインタラクション	⛔	✅
useState / useEffect	⛔	✅
ブラウザAPI使用	⛔	✅
カスタムフック（ステート含む）	⛔	✅
クラスコンポーネント	⛔	✅

🎯 適切な設計とは？ — 基本的にはSSRを使用。合理的な理由があるときにuse client を使用する。

コンポーネントを複数組み合わせるときに全体をuse clientで作ってしまうのは推奨されない。

// ❌ 悪い例

'use client'

export default function Page() {
  return (
    <>
      <HeavyChart />
      <NonInteractiveContent />
    </>
  );
}

// ✅ 良い例
// page.tsx（Server Component）

import NonInteractiveContent from './NonInteractiveContent';
import HeavyChart from './HeavyChart';

export default function Page() {
  return (
    <>
      <NonInteractiveContent />
      <HeavyChart /> {/* ← use client */}
    </>
  );
}

⚠️ クライアントコンポーネントは、サーバーコンポーネントの中に 「入れる」ことはできる が、逆は不可。

🧮 SSR vs CSR — 状況に応じて使い分けよう

比較軸	SSR（サーバーサイドレンダリング）	CSR（クライアントサイドレンダリング）
初期表示速度	高速（HTML がすぐ出る）	遅い（JS読み込み後に描画）
サーバー負荷	高い（毎回レンダリング）	低い（API 呼び出しのみ）
検索エンジン対応	◎	△（対策しないと弱い）
表示までの応答性	遅め（レンダリング待ち）	早い（プレースホルダなど工夫次第）
セキュリティ	APIキー隠せる	表に出るリスクあり

🧵 まとめ
Server Component は パフォーマンスとセキュリティを重視する場面に有効。

Client Component は インタラクティブ性が必要なUI に使用。

use client は必要な箇所のみに、最小限で使用。

SSRとCSRの使い分けは、「何を最速で見せたいか」「どこに計算負荷をかけるか」で判断。

Next.js の App Router はこのハイブリッド戦略を 1つのアプリ内で柔軟に使える設計が強み。

📘 参考資料
Next.js公式ドキュメント（Server Components）

React 公式ブログ（Server Components Deep Dive）

react-application-architecture-for-production