個人開発から学んだNext.jsにおけるレンダリング方法

個人開発から学んだNext.jsのレンダリング方法まとめ

先ず初めに、個人開発にて、ユーザーが自分専用の問題集(問題とそれに対する解答)を作成し、カードをタッチすることで解答を確認しながら、繰り返し学習を行うことができるサービスを開発したのでぜひ気になったら以下の記事を記事をチェックしてみてください！。
https://zenn.dev/daichi09167/articles/0c3e20a70c5821
Next.jsのレンダリング方法には、主に以下の4つがあるので以下にまとめる。

1. プリレンダリング（Pre-rendering）
   • 静的生成（SSG: Static Site Generation）
   • サーバーサイドレンダリング（SSR: Server Side Rendering）
   • 部分的プリレンダリング(Partial Pre-rendering)
2. クライアントサイドレンダリング（CSR: Client Side Rendering）
3. インクリメンタル静的再生成（ISR: Incremental Static Regeneration）

1. プリレンダリング（Pre-rendering）

Next.jsでは、基本的にすべてのページがプリレンダリングされる。
プリレンダリングとは、ユーザーがアクセスする前にHTMLを事前に生成してクライアントに配信することである。

(1) 静的生成（SSG: Static Site Generation）

• 概要
  　ビルド時にHTMLを生成し、リクエスト時には同じHTMLを返す。最も高速なレンダリング方式。
  ちなみに、これはビルド時1回だけデータフェッチして、ビルドされた後にデータを変更することができないという意味でもある。なので、SSG はビルド後にデータを変更する必要がないページに向いている。つまり、あらかじめHTMLを作っておく（あらかじめ焼いたパンを並べておいてすぐ配れるイメージ）ということ。またSSGでは、すでに出来上がったページをCDN（Contents Delivery Network）に置くことができる。CDNとは、世界中に分散配置されたサーバー群（キャッシュサーバー）を利用し、ユーザーがアクセスする際に最も近いサーバーからコンテンツを配信することで、遅延を減らし、高速な表示を実現する。ちょこっと脱線したい方は、CDNの基本的な定義は以下に書いてあるよ。

CDNってなーに

CDNの主な構成要素は、キャッシュサーバーとオリジンサーバーの2つである。

1. オリジンサーバー

• Webサイトのオリジナルデータが保管されている場所。
• コンテンツの原本を生成する場所。

2. キャッシュサーバー

*オリジンサーバーのコンテンツのコピーを保持。
*ユーザーからのアクセス要求に対し、オリジンサーバーの代わりにコンテンツを配信。
*2回目以降のアクセスでは、キャッシュサーバーから配信されるため高速。

CDNの仕組み

1. ユーザーがWebサイトにアクセスすると、CDNはユーザーから最も近いキャッシュサーバーを特定。
2. キャッシュサーバーにコンテンツがあれば、そこからユーザーに配信します。
3. キャッシュサーバーにコンテンツがない場合は、オリジンサーバーからコンテンツを取得し、キャッシュサーバーに保存してからユーザーに配信する。

• 適用場面
  • 変更頻度が低いコンテンツ（ブログ記事、ドキュメント、ヘルプページ等）
  • APIやデータベースから事前にデータを取得できるページ。

(2) サーバーサイドレンダリング（SSR: Server Side Rendering）

• 概要
  　リクエストごとにサーバーでHTMLを生成し、クライアントに返す。つまり、注文が入ってから作るみたいな感じ。SSRは、サーバー側でHTMLを生成するため、サーバーの負荷が増加するというデメリットもある。
• 適用場面
  • ユーザーごとに異なるデータを表示するページ（認証情報が必要なダッシュボードなど）
  • 変更が頻繁にあるデータを扱うページ（ニュースフィード、ダッシュボード、天気予報）

(3) 部分的プリレンダリング(Partial Pre-rendering)

• 概要
  　PPR（部分的プリレンダリング） は、SSGとSSRのハイブリッド的なアプローチで、ページの一部を静的にプリレンダリングし、残りを動的にレンダリングする仕組み。静的にレンダリング可能な部分（例えば、ヘッダーやナビゲーションバー）はSSGで生成。動的に生成すべき部分（例えば、コメント欄やユーザー個別情報）はSSRで処理。
• 適用場面
  • リアルタイムのデータ（株価、スポーツのスコア、天気予報等）
    • タイトルやナビゲーションバーなどは静的に生成

2. クライアントサイドレンダリング（CSR: Client Side Rendering）

• 概要
  　CSR（クライアントサイドレンダリング）は、まずは最低限のHTMLを送り、JavaScriptが動いてからページの内容を作るという仕組みである。まず空の器を渡して、あとから材料を取り寄せて作る（自分で作るサラダバー）のイメージ。メリットはページ遷移が早い、サーバーの負荷が軽い。

• 適用場面

  • サーバーの処理が重いゲームアプリ
  • リアルタイムのチャット、ストリーミングサービス、SNS等

3. インクリメンタル静的再生成（ISR: Incremental Static Regeneration）

• 概要
  　ISR（Incremental Static Regeneration）は、SSG（静的サイト生成）とSSR（サーバーサイドレンダリング）のいいとこ取りをした仕組みである。あらかじめ生成した静的ページを、必要なときだけ自動で更新することが可能。作り置きしつつ、一定時間ごとに新しくする（古くなった料理だけ作り直す）みたいなイメージ。メリットは、事前にすべてのページを生成しないので、ビルド時間を大幅に短縮できるということ。例えば、数千ページあるブログサイトでも、最初に人気記事だけ静的生成し、残りはユーザーアクセス時に作ることで ビルド時間を大幅に短縮できる。

• 適用場面

  • 定期的に内容が更新されるが、リアルタイムでなくてもいいページ
  • 大量のページを持つサイト