Next.jsのCSRとSSGの違いを初心者向けにわかりやすく解説！Next.jsで最適な表示方法を選ぶ方法

1. CSR（Client Side Rendering）とは？

1. CSR（Client Side Rendering）とは？

CSRはブラウザ側でページを作成する方法です。ユーザーがWebサイトにアクセスすると、まず空のHTMLが読み込まれ、その後JavaScriptが動いて画面の内容を表示します。

例えるなら、注文してから料理を作るレストランのようなイメージです。アクセスして初めてページの内容が組み立てられます。

import React, { useEffect, useState } from "react";

function CSRExample() {
  const [data, setData] = useState("");

  useEffect(() => {
    setTimeout(() => {
      setData("これはCSRで表示されたデータです");
    }, 1000);
  }, []);

  return <div>{data || "読み込み中..."}</div>;
}

export default CSRExample;

2. SSG（Static Site Generation）とは？

2. SSG（Static Site Generation）とは？

SSGはあらかじめビルド時にページを生成しておく方式です。ユーザーがアクセスしたときには、すでに完成したHTMLが返されるので表示が早いです。

例えるなら、前もって料理を作っておいてテーブルに置いてあるレストランです。注文後すぐに食べられます。

import React from "react";

export async function getStaticProps() {
  return {
    props: {
      message: "これはSSGで生成されたデータです"
    }
  };
}

function SSGExample({ message }) {
  return <div>{message}</div>;
}

export default SSGExample;

3. CSRとSSGの読み込み速度の違い

3. CSRとSSGの読み込み速度の違い

CSRは初回ロード時にJavaScriptを実行してページを作るので、初めてのアクセスは少し遅くなります。一方でSSGはあらかじめ作ってあるHTMLを返すので、初回ロードから高速に表示されます。

動的なデータが多い場合はCSR、静的な情報が多いサイトはSSGに向いています。

function SpeedTest({ isCSR }) {
  return (
    <div>
      {isCSR 
        ? "CSR：ブラウザでレンダリングされるので初回表示に時間がかかる場合があります"
        : "SSG：事前に生成されるので初回表示が速いです"}
    </div>
  );
}

export default SpeedTest;

4. SEO（検索エンジン対策）への影響

4. SEO（検索エンジン対策）への影響

CSRはページの内容がブラウザで生成されるため、検索エンジンがすぐに内容を取得できないことがあります。SSGはHTMLが最初からあるため、検索エンジンに内容が伝わりやすくSEOに有利です。

例えばブログやコーポレートサイトなど、検索で見つけてもらいたいページはSSGが向いています。

function SEOExample({ isSSG }) {
  return (
    <div>
      {isSSG 
        ? "SSGで生成されたページはSEOに有利です"
        : "CSRのページはSEOで不利になる場合があります"}
    </div>
  );
}

export default SEOExample;

5. データの更新タイミング

5. データの更新タイミング

CSRはユーザーがアクセスしたときに常に最新のデータを取得できます。SSGはビルド時に生成されるので、データを更新するには再ビルドやISR（Incremental Static Regeneration）が必要です。

例えばニュースサイトでは、常に最新情報を表示したいならCSRやISRを使うことがあります。

import React, { useEffect, useState } from "react";

function UpdateExample() {
  const [time, setTime] = useState("");

  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);

  return <div>現在の時刻（CSR更新）：{time}</div>;
}

export default UpdateExample;

6. CSRとSSGの選び方

6. CSRとSSGの選び方

CSRとSSGの選び方は、サイトの用途によって変わります。リアルタイムで更新する必要があるページやユーザーごとに変わるページはCSRが向いています。更新頻度が低く、表示速度やSEOを重視する場合はSSGが向いています。

Next.jsでは両方の方法を組み合わせることもできるので、ページごとに適切な方式を選ぶのがポイントです。

import React from "react";

function ChoiceExample({ useCSR }) {
  return (
    <div>
      {useCSR
        ? "このページはCSRでレンダリングされます"
        : "このページはSSGで事前生成されます"}
    </div>
  );
}

export default ChoiceExample;

7. Next.jsでCSRとSSGを組み合わせる

7. Next.jsでCSRとSSGを組み合わせる

Next.jsでは、トップページはSSGで高速表示、ユーザーのダッシュボードはCSRで動的に生成、といった使い方も可能です。これにより、速度と柔軟性の両立ができます。

import React, { useState, useEffect } from "react";

function MixedPage({ staticMessage }) {
  const [dynamicMessage, setDynamicMessage] = useState("");

  useEffect(() => {
    setDynamicMessage("CSRで表示された動的メッセージです");
  }, []);

  return (
    <div>
      <p>{staticMessage}</p>
      <p>{dynamicMessage}</p>
    </div>
  );
}

export async function getStaticProps() {
  return { props: { staticMessage: "SSGで生成された静的メッセージです" } };
}

export default MixedPage;

まとめ

まとめ

本記事ではNext.jsにおけるCSR（Client Side Rendering）とSSG（Static Site Generation）の違いについて、初心者向けにわかりやすく解説しました。CSRはブラウザ側でページを生成する方式で、ユーザーの操作や動的データの取得に柔軟に対応できますが、初回表示の速度はSSGに比べて遅くなることがあります。一方、SSGはビルド時にページを生成する方式で、アクセス時には完成したHTMLが返るため高速に表示され、検索エンジンへのインデックスもスムーズです。ブログやコーポレートサイト、商品紹介ページなど、検索からの集客を重視するサイトではSSGが特に有効です。

また、CSRとSSGは表示速度、SEO、データ更新タイミングなどの観点で使い分けが重要です。動的データやユーザーごとに表示が変わるページはCSRが適しており、静的なコンテンツや更新頻度が少ないページはSSGで事前生成する方がメリットがあります。Next.jsではISR（Incremental Static Regeneration）や両方式の組み合わせも可能で、トップページはSSG、ユーザー専用ダッシュボードはCSRといった柔軟な実装が可能です。

さらに、Reactのコンポーネント内でのデータ取得や表示方法に応じてCSRとSSGを選択することで、ユーザー体験を向上させつつ、SEO対策を考慮したサイト構築が可能です。例えばCSRではuseEffectフックを使ってデータ取得を行い、表示を動的に変化させることができます。SSGではgetStaticPropsを用いてビルド時に静的データを取得し、アクセス時にはすぐに表示される仕組みを作れます。

CSRの例

import React, { useEffect, useState } from "react";

function CSRExample() {
  const [data, setData] = useState("");

  useEffect(() => {
    setTimeout(() => {
      setData("これはCSRで表示されたデータです");
    }, 1000);
  }, []);

  return <div>{data || "読み込み中..."}</div>;
}

export default CSRExample;

SSGの例

import React from "react";

export async function getStaticProps() {
  return {
    props: {
      message: "これはSSGで生成されたデータです"
    }
  };
}

function SSGExample({ message }) {
  return <div>{message}</div>;
}

export default SSGExample;

CSRとSSGの選び方

実際にNext.jsでサイトを構築する際は、ページの性質や目的に応じてCSRとSSGを選択することが大切です。ユーザーの行動に応じてリアルタイムで更新したい情報はCSR、表示速度やSEO重視であらかじめ内容が固定されるページはSSGといったように使い分けることで、ユーザー体験を最適化できます。また、両方式を組み合わせることで、トップページはSSGで高速表示、ユーザーの個別ページはCSRで動的生成するなど、効率的で柔軟なサイト運営が可能です。

import React, { useState, useEffect } from "react";

function MixedPage({ staticMessage }) {
  const [dynamicMessage, setDynamicMessage] = useState("");

  useEffect(() => {
    setDynamicMessage("CSRで表示された動的メッセージです");
  }, []);

  return (
    <div>
      <p>{staticMessage}</p>
      <p>{dynamicMessage}</p>
    </div>
  );
}

export async function getStaticProps() {
  return { props: { staticMessage: "SSGで生成された静的メッセージです" } };
}

export default MixedPage;