Next.jsで理解するCSR・SSR・SSG・ISRの違い！初心者でもわかるNext.jsの基本概念

1. 画面は「どこで」「いつ」作られるのかがポイント

1. 画面は「どこで」「いつ」作られるのかがポイント

Webサイトの画面は、何もないところから突然表示されているわけではありません。 裏側では、HTMLという「画面の設計図」が作られ、その設計図をもとに私たちのブラウザが表示しています。 普段は意識しませんが、この設計図がどこで・いつ作られるかによって、表示の速さや仕組みが変わってきます。

Next.jsでは、この設計図を作るタイミングを選べます。 具体的には、「自分のブラウザで作る」「サーバーで作る」「あらかじめ作っておく」といった考え方です。 料理にたとえると、その場で作るのか、注文ごとに作るのか、作り置きを使うのかの違いに近いです。 この違いを整理したものが、CSR・SSR・SSG・ISRという呼び方になります。

export default function Page() {
  return <h1>この画面はどこで作られたでしょう？</h1>;
}

2. CSRとは？ブラウザが画面を完成させる仕組み

2. CSRとは？ブラウザが画面を完成させる仕組み

CSRはClient Side Renderingの略で、Clientは私たちが使っているブラウザのことです。 つまりCSRは、ブラウザ側が中心になって画面を完成させる表示方法です。 「最初に全部の完成品が届く」のではなく、土台だけ受け取って、あとから必要な材料を集めて仕上げるイメージになります。

CSRでは、ページを開いた直後はシンプルな見た目になりやすく、 そのあとブラウザがデータを取りに行って、文字や一覧などを表示していきます。 たとえば、ニュース一覧や商品一覧のように「あとから内容が増える画面」はCSRと相性が良いです。 ただし、通信状況が悪いと表示が遅れて見えることもあるため、 「最初に何を見せたいか」を考えて作るのがコツです。

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [message, setMessage] = useState("読み込み中...");

  useEffect(() => {
    setMessage("ブラウザで画面が作られました");
  }, []);

  return (
    <div>
      <h1>{message}</h1>
      <p>CSRは、あとから内容がそろっていく表示方法です。</p>
    </div>
  );
}

初心者の方は、CSRを「ブラウザが後から仕上げる方式」と覚えるだけで十分です。 画面の動きが多いサイトや、ログイン後に内容が変わるページでは、CSRの考え方がよく登場します。

3. SSRとは？アクセスのたびにサーバーで作る仕組み

3. SSRとは？アクセスのたびにサーバーで作る仕組み

SSRはServer Side Renderingの略で、サーバー側で画面（HTMLの設計図）を作ってからブラウザに届ける方法です。 サーバーは、インターネットの向こう側にあるコンピュータだと思ってください。 先に完成品が届くイメージなので、ページを開いた直後から見出しや文章が表示されやすいのが特徴です。

SSRは「アクセスのたびに、その人向けに作って渡す」仕組みです。 たとえば、表示する時刻が毎回変わるページや、ログイン中のユーザー名を出したいページなど、 見るタイミングで内容が変わる場合に向いています。 料理でいうと、注文が入ってから調理して出すレストランのような感じです。 そのぶん毎回作る手間はありますが、「今の情報」を反映しやすいのがSSRの強みです。

export default async function Page() {
  const time = new Date().toLocaleTimeString();

  return (
    <div>
      <h1>表示時刻：{time}</h1>
      <p>更新するたびに、サーバー側で新しい内容が作られます。</p>
    </div>
  );
}

初心者の方は、SSRを「その場で作って渡す方式」と覚えるとスッと入ってきます。 いつ見ても最新の内容を出したいときに、SSRが選ばれやすい理由もここにあります。

4. SSGとは？事前に画面を作っておく仕組み

4. SSGとは？事前に画面を作っておく仕組み

SSGはStatic Site Generationの略です。 Staticは「変わらない」という意味を持ちます。

SSGでは、Webサイトを公開するときに、 あらかじめ画面を全部作っておきます。 作り置きの料理を並べておくようなイメージです。

export const dynamic = "force-static";

export default function Page() {
  return <h1>このページは事前に作られています</h1>;
}

5. ISRとは？SSGとSSRのいいとこ取り

5. ISRとは？SSGとSSRのいいとこ取り

ISRはIncremental Static Regenerationの略です。 名前は難しいですが、考え方はシンプルです。

基本はSSGと同じで事前に画面を作りますが、 一定時間が経つと、自動で新しい画面に更新されます。 作り置きを定期的に入れ替える仕組みです。

表示の速さと情報の新しさを両立できるため、 ブログやお知らせページでよく使われます。

6. Next.jsでCSR・SSR・SSG・ISRを理解するコツ

6. Next.jsでCSR・SSR・SSG・ISRを理解するコツ

Next.jsでは、これらの表示方式を無理に覚える必要はありません。 「いつ画面を作りたいか」を考えるだけで自然に理解できます。

動きが多い画面はCSR、 常に最新情報が必要ならSSR、 変わらない説明ページはSSG、 定期更新ならISR。 この感覚を覚えるだけで十分です。

まとめ

まとめ

Next.jsにおける表示方式の全体像を振り返る

ここまで、Next.jsを使いながらCSR、SSR、SSG、ISRという四つの表示方式について順番に学んできました。 これらは難しい専門用語に見えますが、本質はとてもシンプルで、「画面となるHTMLをいつ、どこで作るのか」という一点に集約されます。 ブラウザ側で作るのか、サーバー側で作るのか、あらかじめ用意しておくのか、それとも定期的に作り直すのか。 この違いを理解するだけで、Next.jsの基本的な考え方が一気に見えてきます。

CSRは、ブラウザが中心となって画面を完成させる方法でした。 ページを開いた直後は最低限の表示から始まり、あとからデータを取得して内容が増えていくため、 ユーザー操作に応じて画面が変化するアプリケーション的なWebサイトと相性が良い仕組みです。 一方で、通信状況によっては表示が遅れて見えることもあるため、 どの情報を最初に見せるかを考えながら使うことが大切になります。

SSRは、アクセスのたびにサーバー側でHTMLを生成する方法です。 ページを開いた瞬間から見出しや文章が表示されやすく、 常に最新の情報を反映したい画面に向いています。 時刻やユーザーごとの情報など、「見るたびに変わる内容」を扱う場合に、 SSRの仕組みはとても分かりやすく役立ちます。

SSGは、公開前にあらかじめ画面を作っておく表示方式です。 内容がほとんど変わらない説明ページや固定ページでは、 毎回作り直す必要がないため、表示速度が非常に速くなります。 初心者の方がNext.jsに触れる際も、 「変わらないページは最初に作っておく」という考え方を持つと、 SSGの役割が自然に理解できるようになります。

ISRは、SSGをベースにしながら一定時間ごとに画面を作り直す仕組みでした。 表示の速さと情報の新しさを両立できるため、 ブログ記事やお知らせ一覧のように「たまに更新されるページ」でよく使われます。 毎回サーバーで作るほどではないけれど、完全に固定でも困る、 そんな場面でISRは非常にバランスの取れた選択肢になります。

表示方式は使い分けるもの

重要なのは、CSR、SSR、SSG、ISRのどれが正解ということではなく、 ページの役割に応じて使い分けるという考え方です。 Next.jsは、これらを一つのプロジェクトの中で自然に組み合わせられる点が大きな特徴です。 画面ごとに「このページはいつ作るのが一番自然か」を考えることで、 無理なく最適な構成を選べるようになります。

サンプルとして考えるNext.jsのページ

export default function Page() {
  return (
    <div>
      <h1>Next.jsの表示方式まとめページ</h1>
      <p>
        このページは、用途に応じて
        CSR・SSR・SSG・ISRを選ぶことの大切さを伝えています。
      </p>
    </div>
  );
}