👋

【Next.js】CSR・SSR・SSG・ISRとは？

2023/11/18に公開

Next.js

React

tech

Next.jsを使えばSSR・SSG・ISRを使い分けることができます。これらを使い分けることでWebページの表示速度が高速になるなど、Webサービスにおいて重要なパフォーマンスを改善することができます。

そこで今回はCSR・SSR・SSG・ISRとは何かをまとめました。

CSRとは

CSRとは、Client Side Renderingの略で、クライアント側でのレンダリングを意味しています。
CSRはクライアントのリクエストに対し空のHTMLとJSを返却しクライアント側でJSを実行します。そしてレンダリングとデータ取得を行います。

// pages/index.js
import React, { useEffect, useState } from 'react';

const Home = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // クライアントサイドでデータを取得
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      <h1>Client-Side Rendering</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

CSRは全てがクライアント側で完結するため、実装や運用が簡単です。
しかし、CSRはクライアントのリクエストに対して空のHTMLを返すので、SEOとOGPに対応ができません。さらにクライアント側でJSを実行するため、初回読み込み時は初期表示が遅いというデメリットがあります。

SSRとは

SSRとは、Server Side Renderingの略で、サーバ側でのレンダリングを意味しています。主にサーバ上でページを構築してHTMLをクライアントに送信します。
Next.jsではSSR用にgetServerSideProps関数が用意されています。その関数内にデータを取得する処理を書きます。

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  // サーバーサイドでデータを取得
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: { data },
  };
}

export default Home;

SSRはサーバ側でHTMLを生成するため、SEOとOGPに対応が可能で初期表示も高速です。

SSGとは

SSGとは、Static Site Generationの略で、静的サイト生成という意味です。SSGはユーザのリクエストがあるたびにサーバでページを構築するのではなく、ビルド時に静的なHTMLを生成します。
Next.jsではSSG用にgetStaticProps関数が用意されています。

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Static Site Generation</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  // ビルド時にデータを取得
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: { data },
  };
}

export default Home;

SSRよりもレスポンスが高速でSEOに強いです。静的コンテンツには適しているものの動的コンテンツにはあまり適していないです。

ISRとは

ISRとは、Incremental Static Regenerationの略で、インクリメンタル静的再生成という意味です。

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>Incremental Static Regeneration</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  // ビルド時に初期データを取得
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

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

export default Home;

挙動はSSGと同じですが、ユーザーのリクエストに対してビルド時に生成されたHTMLを返却し、かつバックグラウンドで一定期間ごとに静的ページの再生成をサーバ側でやるというものです。

CSRとは

SSRとは

SSGとは

ISRとは

Discussion