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

生徒

「Next.jsのServer Componentsって、そもそも何なんですか？」

先生

「Next.jsでは、サーバー側で動く部品と、ブラウザ側で動く部品を分けて作れる仕組みがあります。それがServer Componentsです。」

生徒

「サーバーとかブラウザって、パソコン初心者でも理解できますか？」

先生

「大丈夫です。今日はたとえ話を使いながら、できること・できないことを順番に説明します。」

1. Next.js Server Componentsとは何か？

Next.js Server Componentsとは、Next.jsというWebアプリを作る道具の中で、「サーバーでだけ動く部品」を指します。サーバーとは、インターネットの向こう側にあるコンピューターのことで、Webページを作って送ってくれる役割を持っています。

たとえるなら、レストランの厨房がサーバーで、完成した料理をお客さんに出すのがブラウザです。 Server Componentsは、厨房の中だけで調理をする担当だと考えると分かりやすいです。

2. Server Componentsでできること① データを直接取得できる

Next.js Server Componentsの大きな特徴は、データを直接サーバーから取得できる点です。データとは、商品情報やユーザー名などの文字や数字の集まりのことです。


async function Page() {
  const data = await fetch("https://example.com/api/data");
  const result = await data.json();

  return <h1>{result.title}</h1>;
}

export default Page;

（サーバー側でデータを取得し、画面にタイトルの文字が表示されます）

このように、Server Componentsでは特別な準備をしなくても、データを安全に扱えます。

3. Server Componentsでできること② 秘密の情報を守れる

パスワードや秘密の設定値など、外に出てはいけない情報を扱えるのも特徴です。ブラウザ側に送られないため、他人に見られる心配がありません。


function SecretMessage() {
  const secret = "これはサーバーだけの秘密";

  return <p>{secret}</p>;
}

export default SecretMessage;

（画面には文字が表示されますが、中身はサーバー内で処理されています）

4. Server Componentsでできること③ 表示専用の画面作り

Server Componentsは、画面を表示するだけの役割が得意です。ボタンを押したり、入力したりしない説明ページに向いています。


function AboutPage() {
  return (
    <div>
      <h1>このサイトについて</h1>
      <p>Next.jsで作られた説明ページです。</p>
    </div>
  );
}

export default AboutPage;

5. Server Componentsでできないこと① 画面の操作に反応する処理

ボタンを押したときに画面が変わるような処理は、Server Componentsではできません。これは、ブラウザ側で動く仕組みが使えないためです。

このような操作は、Client Componentsと呼ばれる別の部品で行います。

6. Server Componentsでできないこと② useStateやuseEffectの使用

useStateやuseEffectは、画面の状態を管理するための仕組みです。これらはブラウザ専用なので、Server Componentsでは使えません。


"use client";

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

export default Counter;

（ボタンを押すたびに数字が増えます。これはClient Componentsの例です）