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

Next.js Server Componentsとは、画面を作る処理をサーバー側で行う仕組みです。サーバーとは、インターネットの向こう側にある高性能なコンピューターのことです。私たちがブラウザでページを開くと、まずサーバーがHTMLを作り、それをブラウザに送ります。この考え方を使うことで、表示が速くなり、セキュリティも高くなります。

2. レンダリングとは？初心者向けに超かんたん解説

レンダリングとは、「画面を作って表示すること」です。たとえば、設計図をもとに家を建てるように、プログラムの指示をもとに画面を作ります。 Next.jsでは、このレンダリングをサーバーで行うのがServer Componentsの特徴です。ブラウザに送る前に完成品を作るイメージを持つと理解しやすくなります。

3. Server Componentsの基本的なレンダリングの流れ

Next.jsのServer Componentsでは、次の流れで画面が表示されます。まずユーザーがページを開きます。次にサーバーがコンポーネントを実行し、HTMLを生成します。最後に、そのHTMLがブラウザに送られて画面に表示されます。 JavaScriptの処理を最小限にできるため、動作がとても軽くなります。

4. 最もシンプルなServer Componentの例


export default function Page() {
  return (
    <div>
      <h1>こんにちは、Next.js</h1>
      <p>これはServer Componentです。</p>
    </div>
  );
}

（ページを開くと「こんにちは、Next.js」と表示されます。サーバーでHTMLが作られています）

5. サーバーでデータを取得してレンダリングする

Server Componentsの強みは、サーバーで直接データを扱える点です。データベースやAPIから情報を取得し、そのまま画面に反映できます。ブラウザに秘密の情報を渡さなくてよいので、安全性も高くなります。


async function getMessage() {
  return "サーバーから取得したメッセージ";
}

export default async function Page() {
  const message = await getMessage();

  return <h1>{message}</h1>;
}

（サーバーで文字列を取得し、その内容が画面に表示されます）

6. Client Componentsとの違いをイメージで理解する

Client Componentsは、ブラウザ側で動く部品です。一方、Server Componentsはサーバーで完結します。料理で例えると、Server Componentsは完成したお弁当を渡す方法、 Client Componentsは材料を渡して自分で調理する方法です。 Next.jsでは、この2つを使い分けられます。

7. Server Componentsで使えないこと

Server Componentsでは、クリックイベントや状態管理は使えません。これはブラウザで動く処理だからです。そのため、動きのある部分はClient Componentsに任せます。表示だけの部分をサーバーで作るのが基本の考え方です。

8. 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>
  );
}

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