先生と生徒の会話形式で理解しよう

生徒

「Next.jsのServer ComponentsとClient Componentsって何が違うんですか？」

先生

「Server Componentsはサーバー側で動き、Client Componentsはブラウザ側で動く仕組みです。」

生徒

「どうやって使い分けるんですか？」

先生

「表示の速度や操作機能によって役割を分けることが重要です。それでは具体的な使い方を見ていきましょう。」

1. Next.jsのServer ComponentsとClient Componentsとは？

Next.jsはReactをもとに作られたWeb開発用のフレームワークです。フレームワークとは、Webサイトを作るための便利な機能が最初から用意された開発の土台です。App Routerでは画面を表示する方法としてServer ComponentsとClient Componentsという二つの仕組みが用意されています。

Server Componentsはサーバー側で処理を行ってから画面を作る方法です。サーバーとはインターネット上でデータを管理しているコンピューターのことです。料理店に例えると、厨房で料理を作ってから客に提供するイメージです。

Client Componentsはブラウザ側で処理を行う方法です。ブラウザとはChromeなどの閲覧ソフトです。こちらは客がテーブルで調味料を加えて味を調整するイメージです。

この二つを正しく使い分けることで表示速度の向上や動作の安定を実現できます。

2. Server Componentsの特徴とメリット

Server Componentsはデフォルトで使用される仕組みです。特別な設定を書かなくても自動的にサーバー側で処理されます。サーバー側でHTMLを作ってからブラウザに送るため読み込みが速くなります。

またデータベースとの接続が安全に行えるという利点があります。データベースとは情報を保存する場所のことです。例えば会員情報や商品情報などを保存するのに使われます。サーバー側で処理することで安全性を保てます。


async function Page() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

export default Page;

外部の情報を取得して画面に表示します。ページを開いた時点で内容が完成した状態で表示されます。

このようにデータを取得して表示する処理はServer Componentsに向いています。

3. Client Componentsの特徴とメリット

Client Componentsはブラウザ側で動作します。ボタン操作や入力フォームなど利用者の操作に反応する機能を作る場合に使用します。Client Componentsを使う場合はuse clientという宣言を書く必要があります。


"use client";
import { useState } from "react";

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

  return (
    <div>
      <p>回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

ボタンを押すたびに数字が増えて表示が変わります。

このように利用者の操作に応じて画面が変わる機能はClient Componentsで実装します。

4. Server ComponentsとClient Componentsの使い分けの基本

使い分けの基本は操作が必要かどうかです。表示するだけの画面はServer Componentsを選びます。入力やクリックなどの操作がある場合はClient Componentsを選びます。

Server Componentsは表示速度を重視する場面に適しています。Client Componentsは利用者とのやり取りが必要な場面に適しています。この二つを分けることで無駄な処理を減らすことができます。


import Counter from "./Counter";

export default function Page() {
  return (
    <div>
      <h1>トップページ</h1>
      <Counter />
    </div>
  );
}

ページはサーバーで表示し、カウンターだけがブラウザで動きます。

このように一つの画面の中で役割を分けることも可能です。

5. App Routerでのコンポーネント構成の考え方

App Routerでは画面を小さな部品に分けて作成します。この部品をコンポーネントと呼びます。コンポーネントとは再利用できる画面の部品です。

例えば記事一覧の表示部分はServer Componentsにして、検索入力欄だけClient Componentsにする設計が可能です。この方法を使うことで読み込みの負担を減らしながら操作機能も実現できます。


"use client";
import { useState } from "react";

export default function SearchBox() {
  const [keyword, setKeyword] = useState("");

  return (
    <input
      value={keyword}
      onChange={(e) => setKeyword(e.target.value)}
      placeholder="検索"
    />
  );
}

入力した内容がリアルタイムで更新されます。

このような入力処理はClient Componentsに配置するのが適切です。

6. Server Componentsを使うときの注意点

Server Componentsでは状態管理やイベント処理は利用できません。状態管理とはデータの変化を記憶する仕組みです。イベント処理とはクリックや入力などの動作に反応する処理です。

そのため画面の変化が必要な場合はClient Componentsに分離します。またブラウザ専用の機能はServer Componentsでは使用できません。例えば画面サイズ取得やローカル保存機能などです。

7. Client Componentsを使いすぎない設計の重要性

Client Componentsは便利ですが多用すると読み込みが遅くなります。ブラウザで処理が増えるためです。そのため表示のみの部分はServer Componentsにすることで全体の動作を軽くできます。

Next.jsでは必要な部分だけClient Componentsにする設計が推奨されています。この設計を守ることでページ表示速度の向上や通信量の削減につながります。

まとめ

（振り返りのまとめ）

先生と生徒の振り返り会話