ISR/SSR/SSG/CSRの違いについて

はじめに

Next.jsでアプリケーションを開発する際、SSG、SSR、CSR、ISRという4つのレンダリング手法から適切なものを選択する必要があります。

本記事では、各手法の基本概念と特徴を自分なりに整理しまとめています。
Next.jsを学習し始めた方の参考になれば幸いです。

SSG(Static Site Generation)

SSG(Static Site Generation)=「静的サイト生成」のことを指します。
事前にビルド時に生成されたHTMLファイルを読み込ませることができます。
通常、WordPressなどの従来型CMSだと、リクエストに対してサーバー側でHTMLを動的に生成したものをレスポンスして、描画させます。

しかし、リクエストが飛んでからHTMLを生成するのはレスポンスが遅くなるので、あらかじめHTMLを生成しておいておこう、というのがSSGの考え方といえます。
Next.jsなどはビルド時にHTMLファイルを作成します。あらかじめ生成したHTMLファイルを読ませることができるので動作が軽量で高速です。

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

SSR(Server Side Rendering)

SSR(Server Side Rendering)=「サーバーサイドレンダリング」のことを指します。
サーバー側でリクエストごとにHTMLを生成します。
SSRは初回のページロードでは完全なHTMLが返されるためFCP（First Contentful Paint）は高速です。
SEOには有利です。

https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

CSR

CSR(Client Side Rendering)=「クライアントサイドレンダリング」のことを指します。
クライアント側（ブラウザ）で動的にコンテンツを生成します。
サーバーから最小限のHTMLやJSファイルを読み込み、JSの内容に応じてコンテンツをレンダリングしていきます。

サーバー側で処理しないため、サーバ負荷は軽くなります。
ブラウザ側で動作するJSの読み込みファイルが大きくなるため、ページロードは遅くなります。

https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering

ISR(Incremental Static Regeneration)

ISR(Incremental Static Regeneration)=「インクリメンタル静的再生成」のことを指します。
各ページでキャッシュの保持期間を指定し、その期間毎にページを再生成し、キャッシュを更新します。
SSG同様に高速なレスポンスになります。
SSGではコンテンツ更新時に全ページの再ビルドが必要ですが、ISRでは指定した期間経過後のアクセス時に該当ページのみを再生成するため、大規模サイトでも効率的なコンテンツ更新が可能になります。

https://nextjs.org/docs/pages/guides/incremental-static-regeneration

まとめ

Next.jsの4つのレンダリング手法をまとめると以下のようになります。

• SSG ビルド時に静的HTML生成、高速だが動的コンテンツには不向き
• SSR リクエスト時にHTML生成、SEOに有利だがサーバー負荷が高い
• CSR クライアントでレンダリング、インタラクティブだが初回ロード遅い
• ISR 静的生成 + 段階的更新、大規模サイトでの運用に適している

実際のプロジェクトでは、サイトの性質や更新頻度、SEOの重要度などを考慮して適切な手法を選択することが重要です。今後は実装面での知識も深めていきたいと思います。