【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 },
});