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

生徒

「先生、Next.jsで作ったサイトってどうしてSEOに強いんですか？」

先生

「Next.jsはSSR、つまりサーバーサイドレンダリングに対応しているからです。簡単に言うと、ページの内容をサーバー側で作ってからブラウザに送る仕組みです。」

生徒

「ブラウザで見せる前にサーバーで作ると、SEOにどう関係するんですか？」

先生

「検索エンジンはページのHTMLを読んで評価します。SSRなら最初からHTMLが完成しているので、Googleなどがコンテンツを正しく理解しやすくなるんです。」

生徒

「なるほど！じゃあ、Next.jsでSSRを使うと、検索結果で上位に出やすくなるんですね？」

先生

「そうです。その通りです。では、具体的な仕組みや書き方を見ていきましょう。」

1. SSRとCSRの違いを理解しよう

Next.jsにはSSR（サーバーサイドレンダリング）とCSR（クライアントサイドレンダリング）の二つの方法があります。CSRはブラウザがページを作るので、JavaScriptが実行されるまで何も表示されません。一方SSRは、サーバーでHTMLを作って送るため、最初からページが表示されます。

2. Next.jsでSSRを使う方法

Next.jsではページコンポーネントにgetServerSidePropsという関数を使うことでSSRが可能です。これはページをリクエストした時にサーバー側でデータを取得してHTMLを作る仕組みです。


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

  return {
    props: {
      data
    }
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>データ一覧</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

（ページを開くとサーバーから取得したデータが最初から表示されます）

3. SEOに強い理由はHTMLが最初からあること

検索エンジンはHTMLの内容を読み取ってページの内容を評価します。SSRではサーバー側で完成したHTMLを送るので、検索エンジンがJavaScriptの実行を待たずに情報を正確に取得できます。これにより、SEOに有利になります。

4. 動的データをSSRで扱う例

例えば、ブログの最新記事一覧をサーバー側で取得して表示する場合です。SSRなら、ページを読み込んだ瞬間に最新記事が表示されます。


export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return { props: { posts } };
}

function BlogPage({ posts }) {
  return (
    <div>
      <h1>最新記事</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.summary}</p>
        </div>
      ))}
    </div>
  );
}

export default BlogPage;

（最新記事がページを開いた瞬間にすべて表示されます）

5. SSRと静的サイト生成（SSG）の違い

Next.jsにはSSRの他にSSG（Static Site Generation）もあります。SSGはビルド時にHTMLを作成する方法です。SSRはアクセス時に毎回サーバーで作るため、常に最新データを表示できます。一方SSGは高速ですがデータ更新は再ビルドが必要です。

6. SEO向けのメタ情報もSSRで設定可能

Next.jsではSSRでページごとにメタタグを設定できます。next/headを使えば、検索エンジンが認識するタイトルや説明文をサーバー側で生成可能です。


import Head from "next/head";

function ProductPage({ product }) {
  return (
    <div>
      <Head>
        <title>{product.name}の詳細ページ</title>
        <meta name="description" content={product.description} />
      </Head>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/product/1");
  const product = await res.json();
  return { props: { product } };
}

export default ProductPage;

（検索エンジンがタイトルや説明文を正しく読み取り、SEOに貢献します）

7. SSRでよくある質問と注意点

SSRはSEOや最新データ表示に強いですが、サーバーに負荷がかかりやすいというデメリットもあります。アクセスが多いサイトではキャッシュ戦略を併用することが推奨されます。


export async function getServerSideProps({ params }) {
  // キャッシュを活用したデータ取得例
  const res = await fetch(`https://api.example.com/data/${params.id}`, {
    headers: { "Cache-Control": "s-maxage=60, stale-while-revalidate=120" }
  });
  const data = await res.json();
  return { props: { data } };
}

（1分間はサーバーキャッシュを使い、その後更新されます）

8. SSRを使ったサイトのメリットまとめ

Next.jsのSSRを使うと、検索エンジンに読みやすいHTMLが送られるため、SEOが強化されます。また、常に最新のデータを表示できるので、ユーザー体験も向上します。さらに、メタ情報もページごとに柔軟に設定可能です。初心者でもNext.jsのSSRを使うことで、SEOに強く、高速で使いやすいサイトを作ることができます。

まとめ

今回の記事では、Next.jsのサーバーサイドレンダリング（SSR）がSEOに強い理由や仕組みについて詳しく解説しました。Next.jsはページをサーバー側でレンダリングするため、検索エンジンがHTMLをすぐに読み取ることができ、JavaScriptの実行を待たずにコンテンツを評価できる点が大きな特徴です。これにより、検索順位向上やコンテンツの正確な認識が可能になります。また、SSRではgetServerSidePropsを使うことで、アクセス時に最新データを取得し、常に新しい情報をユーザーに届けられます。静的サイト生成（SSG）との違いも押さえておくことで、用途に応じた適切なレンダリング方式を選択できます。

さらに、SSRを活用すればnext/headを使ってページごとにタイトルやメタディスクリプションを設定でき、検索エンジンが正確に内容を理解することができます。これにより、SEO対策としても非常に効果的です。アクセスが多いサイトではサーバー負荷を考慮し、キャッシュ戦略（Cache-Controlヘッダなど）を併用することでパフォーマンスの最適化も可能です。SSRは初心者でも比較的簡単に導入でき、SEO強化と最新データ表示の両立が可能な点が大きな魅力です。

サンプルとして、ブログ記事の最新データ取得や商品ページのメタ情報設定を紹介しました。これらは、getServerSidePropsでサーバーからデータを取得し、コンポーネントに渡すだけで実現できます。ページを開いた瞬間にコンテンツが表示されるため、ユーザー体験も向上し、離脱率の低下にもつながります。


export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return { props: { posts } };
}

function BlogPage({ posts }) {
  return (
    <div>
      <h1>最新記事一覧</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.summary}</p>
        </div>
      ))}
    </div>
  );
}

export default BlogPage;

（ページを開くと最新記事が最初から表示され、検索エンジンも内容を正確に読み取れます）

このようにNext.jsのSSRを活用することで、SEOに強いサイトを構築できるだけでなく、ユーザーにとっても快適で直感的な操作体験を提供できます。静的生成とSSRの特徴を理解し、サイトの目的に応じて適切に使い分けることが重要です。また、メタ情報の設定やキャッシュ制御を組み合わせることで、より高度なSEO対策やパフォーマンス改善も可能になります。

先生と生徒の振り返り会話

生徒

「先生、SSRを使うとSEOが強くなる理由がよくわかりました。サーバーでHTMLを作るから、検索エンジンが正確に読み取れるんですね。」

先生

「その通りです。さらにgetServerSidePropsを使うことで最新データを表示できる点も大きなメリットです。」

生徒

「静的サイト生成（SSG）とは違うんですね。SSGはビルド時にHTMLを作るけど、SSRはアクセス時に作るから常に最新情報が表示されるんですね。」

先生

「そうです。用途に応じて使い分けることが大切です。また、キャッシュ戦略を組み合わせることでサーバー負荷を抑えつつ高速表示も可能になります。」

生徒

「なるほど！メタ情報もSSRで設定できるので、ページごとにSEOを最適化できるんですね。」

先生