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

生徒

「Next.jsって聞いたことはあるんですが、Server Componentsって何ですか？」

先生

「Next.jsでは、ページを作るための新しい仕組みとしてServer Componentsが使われています。」

生徒

「どうして最初からServer Componentsが使われているんですか？」

先生

「それには、表示の速さや安全性、作りやすさなど、たくさんの理由があります。順番に見ていきましょう。」

1. Next.jsとは？まったくの初心者向けに説明

Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための道具です。 Webサイトとは、パソコンやスマートフォンで見るホームページのことです。 Next.jsを使うと、文字や画像を表示するページを、比較的かんたんに作ることができます。

Next.jsはJavaScript（ジャバスクリプト）というプログラミング言語を使います。 JavaScriptとは、Webページを動かすための言葉のようなものです。ボタンを押したら文字が変わる、画面が切り替わる、といった動きを作れます。

2. Server Componentsとは何かを超かんたんに理解しよう

Server Components（サーバーコンポーネンツ）とは、「サーバー側で動く部品」のことです。サーバーとは、インターネットの向こう側にある高性能なパソコンのようなものです。私たちのパソコンやスマホではなく、遠くにある機械が計算をしてくれます。

コンポーネントとは、画面の部品のことです。たとえば「見出し」「ボタン」「文章のかたまり」などが部品になります。 Server Componentsは、その部品をサーバーで作ってから、完成した画面だけを送ってくれます。

3. Next.jsでServer Componentsがデフォルトな理由① 表示が速い

Next.jsでServer Componentsが最初から使われる一番の理由は、ページ表示がとても速くなるからです。例えるなら、レストランで料理を完成させてから運んでくれるようなイメージです。お客さんの席で一から料理を作るより、キッチンで作った方が早いですよね。

Server Componentsでは、重たい計算やデータの整理をサーバーで行います。そのため、見る側のパソコンは完成品を見るだけでよくなり、画面がすぐに表示されます。

4. Server Componentsがデフォルトな理由② セキュリティが高い

セキュリティとは、安全性のことです。大切な情報が外に漏れないように守る仕組みを意味します。

Server Componentsでは、秘密の情報をサーバーの中に置いたままにできます。たとえば、データベースのパスワードなどを、ユーザーの画面に送らずにすみます。そのため、Next.jsは初心者でも安全な作りになりやすいのです。

5. Server Componentsがデフォルトな理由③ 書くコードが少なくてすむ

Next.jsのServer Componentsは、余計な設定を書かなくても使えます。最初から「サーバーで動かす」前提なので、難しい切り替えを考えなくて大丈夫です。


export default function Page() {
  return <h1>こんにちは、Next.js！</h1>;
}

（画面に「こんにちは、Next.js！」と表示されます）

このように、とても短いコードでページを表示できます。初心者でも「何をしているか」が見て分かりやすいのが特徴です。

6. データ取得がかんたんに書けるのも理由のひとつ

データ取得とは、情報を取りに行くことです。たとえば「今日のニュース」や「商品一覧」などを読み込むことを指します。 Server Componentsでは、普通の処理のようにデータを使えます。


async function getMessage() {
  return "サーバーからのメッセージ";
}

export default async function Page() {
  const message = await getMessage();
  return <p>{message}</p>;
}

（画面に「サーバーからのメッセージ」と表示されます）

7. Client Componentsとの違いをやさしく説明

Client Components（クライアントコンポーネンツ）は、見る人のパソコンで動く部品です。ボタンを押したときに動きを変えたい場合などに使います。


"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} 回クリック
    </button>
  );
}

（ボタンを押すたびに数字が増えていきます）

Next.jsでは、基本はServer Componentsを使い、必要なときだけClient Componentsを使う考え方になっています。