はじめに
reactやnext.jsを学んでいく内にSSR、SSG、CSRなどのレンダリング手法について耳にすることがあると思います。
個人的に初学者がこのレンダリング手法を素直に飲み込むのは難しいと感じ、例やメリットデメリットを付け加えて自分がわかりやすく説明してみます!
まずレンダリング手法って何?
レンダリング手法とはユーザーがurlをクリックした時や何かしらのリンクをクリックした時に別ページに遷移しようとする時の挙動の違いです。
そこで今回は以下の4つのレンダリング方法について解説します。
・CSR(Client side rendering)
・SSR(Server side rendering)
・SSG(Static Site Generation)
・ISR(Incremental Static Regeneration)
CSR (Client Side Rendering)
概要（流れ）
1.ユーザーがURLをクリックすると、まず空っぽのHTMLとJSファイルがサーバーから送られる
2.ブラウザがJSを読み込んで実行
3.そこで初めてAPIリクエストが飛び、データを取得
4.そのデータをもとにブラウザが画面を描画
要はCSRでは、サーバーから空っぽのHTMLとJSが送られてきて、描画はブラウザ側で行う流れです。
例
SPA（Single Page Application）型のReactアプリ(reactはデフォルトがCSR)
フロントでAPIを叩いてデータを取得 → 画面を更新
メリット
・ページ遷移が速い（再読み込みなしで切り替わる）
・ユーザー操作に応じたリッチなUIが作りやすい
デメリット
・初回表示が遅い（JSが読み込まれるまで真っ白な画面）
・SEO(検索エンジン)に弱い（クローラーが中身を読めない場合がある）
SSR (Server Side Rendering)
概要（流れ）
1.ユーザーがURLをクリック
2.サーバーにリクエストが送られる
3.サーバーがデータを取得 → その場で完成済みHTMLを生成
4.それをブラウザに返す → すぐに画面表示される
SSRは毎回サーバーで完成品を作ってから届けるイメージですね。
例
ニュースサイト（常に最新の情報が必要）
ログインユーザーごとに異なるページ
メリット
・初期表示が速い（サーバーから完成したHTMLが届く）
・SEOに強い
デメリット
・毎回サーバーに負荷がかかる
・遅いサーバーだと逆にレスポンスが遅くなる
SSG (Static Site Generation)
概要（流れ）
1.デプロイやビルドの時点であらかじめHTMLを全部作っておく
2.ユーザーがURLをクリックすると、CDNから即座に完成したHTMLが返る
3.その後、必要ならJSが読み込まれて動きが追加される
完成品を大量に作って置いておくようなイメージですかね。
ちなみにCDNは世界中に分散配置されたサーバー(クラウドとか)が、ユーザーに一番近い場所から静的ファイル（HTML/CSS/JS/画像など）を届けてくれる仕組みです!
例
ブログ、ドキュメントサイト
更新頻度が低いコンテンツ
メリット
・配信が爆速（CDNから静的ファイルを返すだけ）
・サーバーコストがほぼゼロ
SEOにも強い
・デメリット
・更新のたびに再ビルドが必要
・リアルタイム性に弱い
ISR (Incremental Static Regeneration)
概要（流れ）
1.基本はSSGと同じ（完成したHTMLをCDNから返す）
2.ただし指定した時間が経過すると、次のアクセス時に裏で新しいHTMLを再生成
3.新しいHTMLが完成すると、それ以降のユーザーは新しいページを受け取れる
例
ECサイトの商品ページ（数分ごとに在庫情報を更新）
ニュースサイトの一部記事
メリット
・速い + 更新もできる
・SSGの弱点を補う
デメリット
・更新タイミングにラグがある
・実装がやや複雑
終わりに
以上がnext.jsのレンダリング手法の種類でした。
実装方法などは後々また記事にするつもりなので今回は概要だけでも掴んでもらえたら嬉しいです。
もし内容に誤りや補足があれば、ぜひコメントで教えていただけると嬉しいです。
自分自身まだ学習中なので、フィードバックをもとに記事も改善していきます。