Next.jsレンダリングパターン早見表

はじめに

Next.jsでは、ページの内容生成のために異なるレンダリングパターンが提供されています。
これらのパターンは、アプリケーションがデータフェッチング、SEO最適化、パフォーマンスをどのように扱うかに影響します。
毎回公式ドキュメントに行って翻訳ソフト使うのが面倒なので、早見表的にレンダリングパターンの概要とコードの使用例をまとめてみました。

SSG(Static Site Generation)

SSGとは

静的サイト生成 。 SSGはビルド時にページをプレレンダリングします。 つまり、アプリケーションをビルドするときにHTMLが生成され、CDNにキャッシュされて高速に配信されます。 コンテンツが頻繁に変わらないページに適しています。

cacheを"force-cache"とすることで実現できる

// app/page.tsx
const response = await fetch("[URL]", {
  cache: "force-cache",
});

SSR(Server Side Rendering)

SSRとは

SSRは、各リクエストごとにページのHTMLを生成します。頻繁に更新されるデータを表示するページに有用で、ページが最新の情報を含むことを保証します。

cacheを"no-store"とすることで実現できる

// app/page.tsx
const response = await fetch("[URL]", {
  cache: "no-store",
});

ISR(Incremental Static Regeneration)

ISRとは

ISRを使用すると、頻繁に更新する必要があるページでSSGを使用できます。サイト全体を再ビルドすることなく、静的コンテンツを更新することができます。

nextの設定でrevalidateを設定することで指定した時間が経過すると自動でページを最新の状態に更新してくれます。

// app/page.tsx
const response = await fetch("[URL]", {
  next: { revalidate: 3600 },
});

CSR(Client Side Rendering)

CSRとは

CSRでは、JavaScriptが直接ブラウザ内でページコンテンツをレンダリングします。SEOが関心事ではないユーザー固有のページに有用です。

Next.jsではCSR単体で動作することはないので、割愛

補足

一応、それぞれのレンダリングパターンについて簡単な解説を付け加えておきます。
間違っていたら教えてください。

SSG

静的サイト生成 ( Static Site Generation)

概要

SSGはビルド時に全てのページをHTMLファイルとして事前に生成します。生成されたHTMLファイルはCDNを通じて配信されるため、高速なアクセスが可能です。

特徴

• ビルド時に静的ファイルを生成
• 再ビルドなしでの更新が難しい
• SEOに優れている

他との違い

• リクエストごとにページを生成しないため、SSRやCSRに比べて高速
• ISRと比較して、動的な更新に対応しにくい

メリット

• ページの読み込みが非常に高速
• セキュリティが高い
• SEOに強い

デメリット

• コンテンツの更新にはビルドの再実行が必要
• ユーザーごとの動的なページ生成には不向き

SSR

サーバーサイドレンダリング ( Server-Side Rendering)

概要

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

特徴

• リクエストごとにサーバーでHTMLを生成
• 常に最新のデータを表示可能
• ユーザーのリクエストに応じたカスタマイズされたコンテンツの提供が可能

他との違い

• SSGやCSRと比べて、ページ生成までの時間が長くなる可能性がある
• ISRとは異なり、静的ファイルの事前生成は行わない

メリット

• 動的なコンテンツの表示に強い
• SEOに優れている
• 初回のページロードが高速

デメリット

• 高いサーバーリソースを必要とする
• キャッシュ戦略が複雑になる場合がある

ISR

Incremental Static Regeneration

概要

ISRは、SSGの利点を保ちつつ、ページを部分的に再生成することでコンテンツの更新を容易にします。特定のページだけを再生成できるため、全体のビルド時間を大幅に短縮できます。

特徴

• 静的サイトのメリットを保持しつつ、動的な更新が可能
• 特定のページのみを再生成することで、全体のビルド時間を削減

他との違い

• SSGとは異なり、ページの一部だけを更新できる
• SSRやCSRと比べて、生成されたページの読み込みが速い

メリット

• 静的サイトの高速性とセキュリティ
• ページの動的更新が可能
• ビルド時間の短縮

デメリット

• 設定が複雑になる場合がある
• リアルタイムのデータ更新には向かない

CSR

クライアントサイドレンダリング (Client-Side Rendering)

概要

CSRでは、サーバーから送信されたJavaScriptがクライアント側で実行され、ページのコンテンツを生成します。ユーザーとのインタラクションに応じて動的にコンテンツを更新できます。

特徴

• クライアント側でページを動的に生成
• ユーザーの操作に基づいたリッチなインタラクティブ性

他との違い

• SSGやSSRと異なり、サーバーでHTMLを生成しない
• ISRに比べて、ページの初回読み込みが遅い場合がある

メリット

• ユーザーとのインタラクションが豊富なアプリケーションに適している
• ページの部分的な更新が容易

デメリット

• 初回読み込みが遅い場合がある
• SEOに弱い