Next.jsのレンダリング手法：SSR, SSG, ISR, CSRの違いを理解する

Next.jsは、Reactアプリケーションを構築するための強力なフレームワークであり、その最大の特徴の一つが多様なレンダリング手法をサポートしている点です。これにより、開発者はページの特性に応じて最適なパフォーマンスと柔軟性を実現できます。

この記事では、Next.jsで利用可能な主要なレンダリング手法であるSSR, SSG, ISR, そしてCSRについて、それぞれの違いと使い分けを解説します。

レンダリングとは？

まず、レンダリングとは、Reactのコンポーネントコード（JSX）をブラウザが解釈できるHTMLに変換するプロセスのことです。この変換を「いつ」「どこで」行うかによって、パフォーマンスやSEO、ユーザー体験が大きく変わります。

1. SSR (Server-Side Rendering)

SSRは、ユーザーからリクエストがあるたびに、サーバーサイドでHTMLを生成してクライアントに返す手法です。

• 仕組み: ユーザーがページにアクセス → サーバーがリクエストを受け取る → サーバーでReactコンポーネントを実行し、データを取得してHTMLを生成 → 生成されたHTMLをブラウザに送信 → ブラウザがHTMLを表示し、その後JavaScriptが読み込まれてページがインタラクティブになる（Hydration）。
• 長所:
  • 常に最新のデータを表示できる。
  • SEOに強い（検索エンジンが完全にレンダリングされたHTMLをクロールできる）。
• 短所:
  • リクエストごとにサーバーでレンダリングが走るため、サーバー負荷が高くなる可能性がある。
  • SSGに比べて表示速度（TTFB）が遅くなることがある。
• ユースケース: ユーザー認証が必要なダッシュボード、頻繁に更新されるECサイトの商品ページなど、動的なデータに依存するページ。

App Routerでは、デフォルトがSSR的な動作になります。

2. SSG (Static Site Generation)

SSGは、ビルド時にすべてのページのHTMLを事前に生成しておく手法です。

• 仕組み: next buildコマンド実行時 → すべてのページのデータを取得し、HTMLを生成 → 生成されたHTMLファイル群がCDNに配置される → ユーザーがページにアクセス → CDNから即座にHTMLが返される。
• 長所:
  • 表示速度が非常に速い（すでに生成済みのHTMLを返すだけ）。
  • サーバー負荷が低い。
  • SEOに非常に強い。
• 短所:
  • ビルド後にコンテンツを更新した場合、再度ビルドが必要になる。
  • 動的なコンテンツやユーザーごとのコンテンツ表示には向かない。
• ユースケース: ブログ記事、ドキュメントサイト、企業のランディングページなど、コンテンツの更新頻度が低いページ。

3. ISR (Incremental Static Regeneration)

ISRは、SSGの利点を保ちつつ、定期的にページの再生成を行うことでコンテンツを最新に保つことができるハイブリッドな手法です。

• 仕組み: 基本的にはSSGと同じだが、指定した時間（例：60秒ごと）が経過した後にアクセスがあると、サーバーのバックグラウンドでページの再生成が行われる。再生成が完了すると、古いページが新しいページに置き換えられる。
• 長所:
  • SSGの高速な表示速度を維持しつつ、コンテンツを شبهリアルタイムで更新できる。
  • ビルドを頻繁に行う必要がない。
• 短所:
  • 一定時間は古い情報が表示される可能性がある。
• ユースケース: ニュースサイトの記事ページ、在庫情報が表示されるECサイトの商品ページなど、ある程度の頻度で更新が必要なページ。

4. CSR (Client-Side Rendering)

CSRは、従来多くのReactアプリケーションで採用されてきた手法で、ブラウザ（クライアントサイド）でJavaScriptを実行してHTMLを生成します。

• 仕組み: ユーザーがページにアクセス → 最小限のHTMLとJavaScriptファイルが返される → ブラウザがJavaScriptをダウンロード・実行 → JavaScriptがAPIからデータを取得し、DOMを構築してページを表示する。
• 長所:
  • ページ遷移が高速（一度JavaScriptを読み込んでしまえば、差分だけを更新するため）。
  • サーバー負荷が低い。
• 短所:
  • 初期表示が遅い（JavaScriptのダウンロードと実行に時間がかかる）。
  • SEOに弱い（検索エンジンがJavaScriptを実行しない場合、コンテンツを認識できないことがある）。
• ユースケース: ログイン後のダッシュボードや管理画面など、SEOを考慮する必要がなく、インタラクティブ性が高いアプリケーション。

Next.jsでは、'use client'を付けたコンポーネント内でuseEffectを使ってデータを取得する場合などがこれに該当します。

まとめ：各レンダリング手法の比較

手法	レンダリングのタイミング	サーバー負荷	初期表示速度	データ鮮度	SEO	主なユースケース
SSR	リクエストごと	高	中	最新	◎	ダッシュボード、動的ページ
SSG	ビルド時	低	速	ビルド時点	◎	ブログ、ドキュメント
ISR	ビルド時 + 定期的に再生成	中	速	شبهリアルタイム	◎	ニュースサイト、ECサイト
CSR	ブラウザ（クライアント）	低	遅	最新	△	管理画面、Webアプリ

Next.jsの強力な点は、これらのレンダリング手法をページ単位、あるいはコンポーネント単位で柔軟に組み合わせられることです。ページの特性を理解し、最適なレンダリング手法を選択することで、ユーザーにとっても開発者にとっても最高の体験を提供することができます。