Next.jsのSSR（Server Side Rendering）入門！Pages Routerとの違いを初心者向けに解説

1. SSRとは？サーバーでページを作る仕組み

1. SSRとは？サーバーでページを作る仕組み

SSR（Server Side Rendering）は、サーバー側でHTMLを生成してブラウザに送る仕組みです。これにより、ページがすぐに表示されるのでユーザー体験が向上します。例えばニュースサイトやブログのトップページで、最初から記事が見えるようになるイメージです。

SSRを使うとSEOにも強くなります。検索エンジンがサーバーから送られてきたHTMLを直接読むことができるためです。

2. Next.js Pages Routerの基本

2. Next.js Pages Routerの基本

Next.jsでは「pages」フォルダにファイルを作るだけでルーティングが自動で設定されます。例えば

pages/index.js
pages/about.js

のように作ると、ブラウザで「/」や「/about」にアクセスできるようになります。

3. Pages RouterとSSRの組み合わせ

3. Pages RouterとSSRの組み合わせ

Pages Routerでは、サーバーサイドでデータを取得してからページを生成するには、特別な関数を使います。具体的にはgetServerSidePropsという関数です。

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  return { props: { post: data } };
}

function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export default PostPage;

4. CSRとの違いを体感しよう

4. CSRとの違いを体感しよう

CSR（Client Side Rendering）は、最初にHTMLはほとんど空で、ブラウザがJavaScriptでデータを取得して表示します。SSRはサーバーで作ったHTMLを送るので、ページが最初から表示されます。

import { useEffect, useState } from "react";

function PostCSR() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then(res => res.json())
      .then(data => setPost(data));
  }, []);

  if (!post) return <p>読み込み中...</p>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export default PostCSR;

5. getServerSidePropsの仕組みと注意点

5. getServerSidePropsの仕組みと注意点

getServerSidePropsはページアクセスのたびにサーバーで実行されます。これにより常に最新のデータを取得できますが、サーバーの処理時間が長いとページ表示も遅くなる可能性があります。

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

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

export default DataPage;

6. Pages RouterだけでSSRを使わない場合

6. Pages RouterだけでSSRを使わない場合

Pages Routerだけでもページを作ることは可能ですが、SSRを使わない場合はCSRとして動作します。つまりブラウザがデータを取得して描画するため、最初の表示が遅くなることがあります。

function About() {
  return <h1>Aboutページです</h1>;
}

export default About;

7. SSRを使うとSEOに強くなる理由

7. SSRを使うとSEOに強くなる理由

SSRはサーバーが作ったHTMLを送るので、検索エンジンのクローラーが内容をすぐに読み取れます。CSRではJavaScriptで動的に生成される部分が多いため、検索エンジンが正しく内容を読み取れない場合があります。

8. SSRとPages Routerを使った簡単まとめ

8. SSRとPages Routerを使った簡単まとめ

まとめると、Next.jsのPages Routerはページごとにルーティングを作る仕組みで、SSRはサーバーでHTMLを生成して送る仕組みです。getServerSidePropsを使うことでPages RouterでもSSRを活用できます。CSRよりも初期表示が速く、SEOに有利です。

まとめ

まとめ

今回の記事では、Next.jsのSSR（Server Side Rendering）とPages Routerの基本的な使い方、そしてCSR（Client Side Rendering）との違いについて詳しく解説しました。SSRはサーバー側でページを生成しブラウザに送る仕組みであり、ユーザーがページを開いた瞬間にコンテンツが表示されるため、初期表示速度が速くユーザー体験が向上します。また、検索エンジンがサーバーから送られてきたHTMLを直接クロールできるため、SEOに強いのも大きなメリットです。Pages Routerはページごとのルーティングを簡単に設定できる仕組みで、getServerSidePropsを組み合わせることで、ページアクセス時にサーバーで最新データを取得し表示するSSRの機能を簡単に活用できます。

一方でCSRは、ブラウザ側でJavaScriptを使ってデータを取得して表示する仕組みです。初期表示は遅くなる場合がありますが、ユーザー操作に応じた動的更新が得意です。Next.jsでは、必要に応じてCSRとSSRを使い分けることができるため、用途やページの特性に応じて最適なレンダリング方式を選択することが重要です。また、SSRを使う際にはサーバー処理時間が長くなるとページ表示も遅くなるため、パフォーマンスへの配慮も必要です。getServerSidePropsを使う際には、API呼び出しやデータ取得の最適化も意識すると良いでしょう。

さらに、Pages Routerだけを使った場合はデフォルトでCSRとして動作します。つまり、HTMLは最初に空の状態で表示され、データ取得後に内容が描画されるため、データ量が多いページや初期表示速度が求められるページではSSRの活用を検討することが推奨されます。SEOやUXを考慮する場合、特に記事一覧やニュースページ、商品一覧ページなどはSSRを使用することで、検索エンジンによるインデックスやユーザーの満足度を高めることが可能です。

実際のReactコンポーネントでは、SSRで取得したデータをpropsとして受け取り、画面に表示することができます。以下のようにgetServerSidePropsを使ってサーバーサイドでデータを取得し、コンポーネントに渡すことで、常に最新の情報をユーザーに提供できます。

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  return { props: { post: data } };
}

function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export default PostPage;

まとめとして、Next.jsで効率的にSSRを活用するには、Pages Routerでのルーティング設計とgetServerSidePropsを組み合わせることが基本です。また、CSRとSSRの特性を理解し、ページごとの最適なレンダリング方式を選択することで、ユーザー体験とSEOの両方を向上させることが可能です。SSRのメリットは初期表示の高速化とSEOへの対応、CSRのメリットはインタラクティブなUIの実現と動的更新の柔軟性です。この二つのレンダリング方式を適切に組み合わせることで、より高品質なWebアプリケーションを構築できます。