【Next.js】CSR・SSR・SSG ・ISRの違い

はじめに

CSR・SSR・SSG ・ISRの違いについて簡単にまとめて見ました。

CSR (Client-Side Rendering)

ブラウザ上で JavaScript を実行して DOM を生成しコンテンツを表示させる方法。

流れ

1. レンダリングのトリガーを検知
   • コンポーネントの初期レンダリング（画面の初期ロード）やコンポーネントの状態（state）の更新があった場合に検知。
2. 対象のコンポーネントの呼び出し
3. 以前のコンポーネントの状態との比較コミット
4. ブラウザレンダリングする内容の決定
5. 差分があった場合に DOM に適用(変更)

ページの初期ロード時にはコンテンツは何も表示されず、ブラウザでの JavaScript の実行後に初めて画面が表示される。

SSR (Server-Side Rendering)

流れ

1. サーバー側で生成された生の HTML(DOM) が JavaScript の実行前にブラウザで表示される。

2. サーバー側からレンダリングされた HTML に紐付けられた JavaScript を実行し、対象のページを完成される。

UI/UXの向上はもちろんのこと、SEO にも効果があると言われている。

SSG (Static Site Generation)

静的なページでSSG を使用する場合、ページの HTML はビルド時に生成(npm run buildなど)、HTML はリクエストごとに再利用され、CDN によってキャッシュすることも可能。

SSGではリクエストのたびにサーバーがページをレンダリングする必要がないため、レンダリングが高速。

ISR (Incremental Static Regeneration)

ISR を使うことで、SSGで静的ページがあらかじめ生成された後も、一定の時間間隔でそのページを再生成することができる。

SSG による高速レスポンスを実現しつつも、ある程度のリアルタイム性も提供することができる。

参考