【Next.js】CSR・SSR・SSGの違いをまとめる。あとISR・SWRもある。
Next.jsを勉強していて「CSR・SSR・SSG」の違いがわからなかったので、少し調べながらまとめてみました！かなりざっくりとした内容になっています。
もし間違っている部分がありましたら教えていただけると嬉しいです。
CSR
クライアントサイドレンダリング（Client Side Rendering）。ユーザーのブラウザ上でデータフェッチを行い、HTMLを組み立てる。
SEOに弱い。
SSR
サーバーサイドレンダリング（Server Side Rendering）。サーバー上でデータフェッチを行い、HTMLを組み立て、それをクライアントに返す。
サーバーの負荷が大きくなる可能性あり。
SSG
スタティックサイトジェネレーション（Static Site Generation）。ビルド時に事前にHTMLを生成して、リクエストが来たらそれを返す。
「更新性」と「大量ページの生成時の過負荷」が課題だけど、ISRとフォールバック設定で解決できる。
ISR（SSG + 更新性）
Incremental Static Regeneration。SSGに更新性が加えられたものです。ビルド時だけでなく、指定した間隔でHTMLを再生成します。
ISRでは、再生成されたデータは次回クライアントからのリクエスト時に反映される。
（インクリメンタルは「漸次的（少しずつ増やすこと）」、スタティックは「静的な」、リジェネレーションは「再生成」。つまり、静的ファイルを定期的に再生成しつつ、少しずつ増やしていくこと）
SWR（ISR + 即時反映性）
Stale While Revalidate。古いキャッシュ（Stale）を取得して表示している間に（While）、最新情報を取得してキャッシュを更新します（Revalidate）。
SWRでは、ISRで再生成されたデータを生成後すぐにクライアントに反映することができる。つまりISRに即時性を持たせたもの。
まとめ
ほとんどのシチュエーションでは「ISR」か「SWR」で対応すればなんとかなる…のかなと感じました。
最近の記事
