Next.js Server Componentsとは？React 18以降の重要概念を初心者向けに徹底解説
生徒
「Next.jsって聞いたことはあるんですが、Server Componentsって何ですか？」
先生
「Next.jsの中でも、とても大切な考え方のひとつです。パソコンを触ったことがなくても大丈夫ですよ。」
生徒
「サーバーとかReactとか、難しそうな言葉が多くて不安です…」
先生
「一つずつ、身近なたとえを使って説明します。まずは全体のイメージから見ていきましょう。」
1. Next.jsとは？まったくの初心者向けに説明
Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための道具です。 Webサイトとは、インターネットで見るページのことです。ニュースサイトやブログ、買い物サイトもすべてWebサイトです。
Next.jsは、React（リアクト）という仕組みを使って作られています。 Reactとは、画面を部品のように分けて作れる便利な考え方です。 レゴブロックのように、小さな部品を組み合わせて画面を作るイメージです。
Next.jsを使うと、ページの表示が速くなったり、検索エンジンに見つけてもらいやすくなったりします。 そのため、ブログや企業サイトでもよく使われています。
2. Server Componentsとは？言葉の意味から理解しよう
Server Components（サーバーコンポーネント）は、React 18以降で登場した新しい仕組みです。 まず「サーバー」と「コンポーネント」という言葉を分けて考えます。
サーバーとは、インターネットの向こう側にある高性能なコンピューターです。 私たちのパソコンやスマートフォンの代わりに、重い作業をしてくれます。
コンポーネントとは、画面の部品のことです。 例えば、見出し、文章、ボタンなど、それぞれが一つの部品になります。
Server Componentsは、「画面の部品を、ユーザーのパソコンではなく、サーバー側で作る仕組み」と考えると分かりやすいです。
3. なぜNext.jsでServer Componentsが重要なのか
これまでのWebサイトでは、多くの処理をユーザーのパソコンで行っていました。 しかし、パソコンの性能は人によって違います。
Server Componentsを使うと、重たい計算やデータの取得をサーバーに任せられます。 その結果、画面の表示が速くなり、古いパソコンでも快適に動きます。
Next.jsは、最初からServer Componentsを使いやすい設計になっています。 そのため、特別な設定をしなくても、自然にサーバー側の処理ができます。
4. Server Componentsの基本的な動き
Server Componentsは、サーバーでHTMLを作り、その完成した形をブラウザに送ります。 ブラウザとは、ChromeやEdgeなど、インターネットを見るためのソフトです。
料理にたとえると、キッチン（サーバー）で料理を完成させてから、お皿に乗せて運ぶイメージです。 テーブル（ブラウザ）では、盛り付け済みの料理を見るだけです。
export default function Page() {
return <h1>サーバーで作られたページです</h1>;
}
5. Client Componentsとの違いをやさしく理解
Next.jsには、Server ComponentsとClient Componentsの2種類があります。 Client Componentsは、ユーザーのパソコンで動く部品です。
例えば、ボタンを押したときに表示が変わるような動きは、Client Componentsが担当します。
"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>
);
}
6. Server Componentsでできることの具体例
Server Componentsは、データベースから情報を取得する処理が得意です。 データベースとは、大量の情報を保存しておく箱のようなものです。
export default function UserName() {
const name = "山田太郎";
return <p>こんにちは、{name}さん</p>;
}
7. Server Componentsを使うときの注意点
Server Componentsでは、クリックや入力などの操作は扱えません。 そのため、動きが必要な部分はClient Componentsに任せます。
Next.jsでは、サーバー向きの処理と、画面操作向きの処理を自然に分けられます。 これがNext.jsとServer Componentsの大きな強みです。
export default function Message() {
return <p>この文章はサーバーで作られています</p>;
}
8. 初心者がつまずきやすいポイント
最初は「どこまでがサーバーで、どこからがブラウザなのか」が分かりにくいです。 しかし、Next.jsでは基本的に何も書かなければServer Componentsになります。
動きが必要なときだけ「use client」と書く、と覚えると混乱しにくくなります。
