Next.js ISRを初心者でもわかるように解説！SSG/SSR/CSRとの違いを比較

1. Next.jsのページ生成方式とは？SSG・SSR・CSRの基礎

1. Next.jsのページ生成方式とは？SSG・SSR・CSRの基礎

Next.jsでは、Webページを作る方法として大きく分けてSSG、SSR、CSRがあります。初心者向けに簡単に例えると、料理で言うと「料理を作るタイミング」の違いです。

• SSG（Static Site Generation）：あらかじめ全部作っておく。レストランで事前に作ったお弁当を出すイメージ。
• SSR（Server Side Rendering）：注文が入ったら作る。レストランで注文を受けてから料理するイメージ。
• CSR（Client Side Rendering）：お客さん自身が作る。料理キットを渡して自分で組み立てるイメージ。

それぞれメリットとデメリットがあり、使い分けが重要です。

2. ISR（Incremental Static Regeneration）とは？

2. ISR（Incremental Static Regeneration）とは？

ISRは、SSGとSSRのいいとこ取りをした仕組みです。最初は静的にページを生成して高速に配信しますが、指定した時間が経過するとサーバー側で新しいページを自動生成します。これにより、最新情報を効率よく配信できます。

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

  return {
    props: { data },
    revalidate: 10, // 10秒ごとにページを再生成
  };
}

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

export default Page;

3. SSGとISRの違いをわかりやすく比較

3. SSGとISRの違いをわかりやすく比較

SSGはビルド時に全ページを生成するため、ページ内容が変わらないときに最適です。ISRは再生成の時間を設定できるので、最新情報を反映させつつ高速表示が可能です。初心者でも理解しやすい例として、ニュースサイトを考えてみましょう。

export async function getStaticProps() {
  const news = await fetch("https://api.example.com/news").then(res => res.json());

  return {
    props: { news },
    revalidate: 60, // 1分ごとに最新ニュースを取得
  };
}

function NewsPage({ news }) {
  return (
    <div>
      <h1>最新ニュース</h1>
      {news.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

export default NewsPage;

4. SSRとISRの違い

4. SSRとISRの違い

SSRはアクセスがあるたびにサーバーでページを生成するため、常に最新情報が表示されますが、負荷が高く表示速度が遅くなることがあります。一方、ISRは静的ページを優先して配信し、一定時間ごとに更新するので、速度と最新性のバランスが良いです。

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

function ServerPage({ data }) {
  return (
    <div>
      <h1>SSRページ</h1>
      <p>{data.message}</p>
    </div>
  );
}

export default ServerPage;

5. CSRとの比較と使い分け

5. CSRとの比較と使い分け

CSRはブラウザでJavaScriptを実行してページを作るため、ページ遷移が高速でインタラクティブなUIに向いています。しかしSEOに弱く、検索エンジンに内容がインデックスされにくい欠点があります。ISRはSEOに強い静的ページを基本にしつつ、最新データも反映できる点で、CSRよりも検索表示向けのサイトに適しています。

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <div>
      <h1>CSRページ</h1>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default ClientPage;

6. ISRを使うときのポイント

6. ISRを使うときのポイント

ISRを導入するときは、再生成の間隔を適切に設定することが重要です。短すぎるとサーバー負荷が高くなり、長すぎると最新情報の反映が遅れます。また、APIのレスポンスやデータの量に応じて調整しましょう。

export async function getStaticProps() {
  const products = await fetch("https://api.example.com/products").then(res => res.json());

  return {
    props: { products },
    revalidate: 30, // 30秒ごとに商品情報を再生成
  };
}

function ProductsPage({ products }) {
  return (
    <div>
      <h1>商品一覧</h1>
      {products.map(p => <div key={p.id}>{p.name} - {p.price}円</div>)}
    </div>
  );
}

export default ProductsPage;

7. Next.js ISRのメリットまとめ

7. Next.js ISRのメリットまとめ

まとめると、ISRは以下のメリットがあります。

• 静的ページの高速表示を維持できる
• 一定時間ごとに最新データに更新可能
• SEOに強いページを作れる
• SSRのサーバー負荷を抑えつつ最新情報を反映できる

初心者でも、ISRを理解して使いこなせば、ブログやニュースサイト、ECサイトなど幅広く活用できます。

まとめ

まとめ

本記事では、Next.jsにおけるページ生成方式の違いと、特にISR（Incremental Static Regeneration）の仕組みや活用方法について詳しく解説しました。Next.jsではSSG、SSR、CSRという基本の生成方式があり、それぞれ特徴や用途が異なります。SSGはビルド時に静的ページを作るため高速表示に優れ、変更の少ないコンテンツに向いています。SSRはアクセス時にサーバーで生成されるため常に最新情報を表示可能ですが、負荷や表示速度の面で注意が必要です。CSRはブラウザ側で生成されるためインタラクティブなUIに向きますが、SEOに弱いというデメリットがあります。

ISRはこれらの利点を組み合わせたもので、静的生成の高速性を維持しながら、指定した間隔でページを自動再生成し最新情報を反映できます。これにより、ニュースサイトやECサイト、ブログなど、頻繁に情報更新が求められるサイトでもパフォーマンスと最新性を両立可能です。ISRの活用においては、revalidateの設定が重要であり、更新頻度やAPIレスポンスを考慮し適切に設定することで、サーバー負荷の最適化とユーザー体験の向上を図ることができます。

ISR活用のポイント

• 静的ページの高速表示を維持しつつ最新情報を提供する
• 再生成間隔を適切に設定してサーバー負荷を管理する
• SEOに強いページを作り、検索エンジンでの表示を最適化する
• SSRのように常にサーバー負荷をかけず、効率よくデータ更新を行う

サンプルコードで振り返るISR

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

  return {
    props: { blogPosts },
    revalidate: 120, // 2分ごとにページを再生成
  };
}

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

export default BlogPage;