【Next.js】4つレンダリングパターン（CSR, SSR, SSG, ISR）

はじめに

Next.jsでは、目的に応じたページ生成のためにいくつかのレンダリングパターンが提供されています。
どういった時にどのレンダリングパターンを使うのが最適なのか、理解して使う必要があります。
ページごとに最適なレンダリング方法を選択できるのはNext.jsの強みではあるものの、初めの方はなかなか理解するのが難しい部分だと思うので、この機会に各レンダリングパターンの特徴と書き方をまとめてみました。

レンダリング・・・表示するページファイルの中身（ソースコード）を読み込んで、見た目を整えてページに表示すること。

4つのレンダリングパターン

レンダリングパターン	特徴	最適なアプリケーション
CSR(Client Side Rendering)	・クライアント側でレンダリング・初回読み込みが遅くなる・それ以降の操作は高速になる・SEOに弱い	動的でインタラクティブが豊富なアプリケーション
SSR(Server-Side Rendering)	・リクエストのたびにサーバー側でレンダリング・初回読み込みは高速・クライアントの環境（スペック）に依存しない・SEOに強い	コンテンツを重視したアプリケーション
SSG(Static Site Generation)	・ビルド時にHTMLファイルをレンダリング・読み込みが一番高速・クライアントの環境（スペック）に依存しない・SEOに強い	コンテンツの更新がほぼ無いアプリケーション
ISR(Incremental Static Regeneration)	・SSGとSSRの良いとこどり・読み込みが高速・設定した時間毎に再ビルドが行われる	頻度は高くないものの、コンテンツの更新があるアプリケーション

ビルド・・・コンパイルなどを行い、実行可能なプログラムを作成するプロセスのこと。

コンパイル・・・人間が書いたソースコードを機械語に変換するプロセスのこと。

CSR(Client Side Rendering)

CSRでは、JavaScriptが直接ブラウザ内でページコンテンツをレンダリングします。
以降のページ更新では、ブラウザ側で持っているDOMの変更点（差分）を差し替えることで更新します。
よって、以降の操作ではサーバー側にリクエストを行う必要がなく、高速に操作できます。

SSR(Server-Side Rendering)

リクエストのたびにサーバー側でHTMLを動的に生成し、クライアントに送信します。
よって、常に最新の情報をページに反映できます。

const response = await fetch(URL, {
  cache: "no-store",
});

SSG(Static Site Generation)

Next.jsの場合、デフォルトがSSGとなっています。
SSGは、ビルド時にページをサーバー側でプリレンダリングし、CDNにキャッシュされて高速に配信されます。
よって、コンテンツを変更した場合は再度ビルドする必要があります。

CDN(Content Delivery Network)・・・ファイルが複数のサーバに置かれ、ユーザーは自分の近くのコンピュータからファイルを受け取る仕組みのこと。そうすることで、表示速度が速くなったり、たくさんの人が同時に見ても遅くなりにくい。

const response = await fetch(URL, {
  cache: "force-cache",
});

ISR(Incremental Static Regeneration)

ISRでは、SSGの利点を保ちつつ、ページを部分的に再生成することでコンテンツを更新します。
特定の部分だけを再生成できるため、全体のビルド時間がSSRに比べて大幅に短縮できます。
再ビルドする頻度は、revalidateで設定します。
下の例だと、3600秒（1時間）ごとに再ビルドが行われます。

const response = await fetch("[URL]", {
  next: { revalidate: 3600 },
});