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

生徒

「Next.jsってSEOに強いって聞いたんですけど、本当ですか？」

先生

「本当です。特にServer Componentsという仕組みが大きく関係しています。」

生徒

「Server Componentsって、何をしてくれるんですか？」

先生

「パソコンやスマホに表示する前に、サーバー側でページを作ってくれる仕組みです。順番に見ていきましょう。」

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

Next.js Server Componentsとは、Webページの表示内容をサーバー側で先に作成する仕組みです。サーバーとは、インターネット上でデータやページを提供する大きなコンピューターのことです。これまでのWebサイトでは、ブラウザ側で多くの処理を行う方法が主流でした。 Server Componentsを使うと、ページの中身を完成させた状態でブラウザに渡すことができます。そのため、表示が速く、検索エンジンにも内容が正しく伝わりやすくなります。

2. 検索エンジンがページを読む仕組み

検索エンジンは、人間の代わりにWebページを読み取るロボットを使っています。このロボットは、ページに書かれている文字や構造を見て内容を理解します。もし表示内容が後から動的に作られる場合、正しく読み取れないことがあります。 Server Componentsでは、最初から完成したHTMLが渡されるため、ロボットがページの情報を確実に読み取ることができます。

3. Server ComponentsとHTML生成の流れ

Next.jsでは、リクエストが来た時点でサーバーがHTMLを生成します。これは、お弁当を注文してから作るのではなく、完成したお弁当をすぐ渡すようなイメージです。完成したHTMLには、見出しや本文がすべて含まれているため、ブラウザはすぐに内容を表示できます。


export default function Page() {
  return (
    <div>
      <h1>Next.js Server Components</h1>
      <p>サーバーでHTMLを生成します。</p>
    </div>
  );
}

4. 表示速度が速くなる理由

表示速度はSEOにとても重要です。ページが遅いと、検索エンジンの評価が下がることがあります。 Server Componentsでは、JavaScriptの読み込み量を減らすことができます。その結果、ページが軽くなり、表示が速くなります。


async function getMessage() {
  return "サーバーで取得したデータ";
}

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

5. JavaScriptが少なくても内容が伝わる

通常のWebアプリでは、JavaScriptが実行されないと内容が表示されない場合があります。しかしServer Componentsでは、JavaScriptがなくてもHTMLとして内容が存在します。これにより、検索エンジンが確実にテキスト情報を取得できます。


export default function Article() {
  return (
    <article>
      <h2>SEOに強い理由</h2>
      <p>HTMLとして最初から表示されます。</p>
    </article>
  );
}

6. メタ情報を正しく設定しやすい

SEOでは、ページのタイトルや説明文も重要です。 Next.jsでは、Server Componentsと一緒にメタ情報を管理できます。これにより、検索結果に表示される内容を正確にコントロールできます。


export const metadata = {
  title: "Next.js Server Components",
  description: "SEOに強い理由を解説します",
};

export default function Page() {
  return <h1>Server Components</h1>;
}