はじめに
こんにちは！エンジニア転職を目指している伊藤です！
今回は、Next.jsを学習している中で、SSG、SSR、ISRという聞き慣れない言葉が出てきたので、記事にまとめようと思います。
SPA(Single Page Application)とは
SPAは、クライアント側（フロントエンド）でページのレンダリングとデータの操作を行うウェブアプリケーションの手法です。
初回のページロード時に全ての必要なリソース（HTML、CSS、JavaScript、画像など）を取得し、その後はJavaScriptを使用してページ遷移やコンテンツの更新を行います。
メリット
- UXの向上
- シームレスなページ遷移
- キャッシュを活用した高速なロード
デメリット
- 初期ロードが遅くなる場合がある
- SEO（検索エンジン最適化）が弱い
- セキュリティ上のリスクがある
代表的なフレームワーク
- React
- Angular
- Vue.js
SSG(Static Site Generation)
SSGは、サーバー側（バックエンド）で静的なHTMLファイルを生成する手法です。
サーバーが事前にページをビルドし、その静的なファイルをクライアントに提供します。
ブログや企業のウェブサイトなど、頻繁に変更されないコンテンツを効率的に配信することができます。
メリット
- 高速なロード
- SEOに優れる
- 安全性が高い
- ホスティングが容易
デメリット
- コンテンツの更新に再ビルドが必要
- 動的なコンテンツへの対応が難しい
- データの適切なキャッシュ管理が必要
代表的なフレームワーク
- Gatsby
- Next.js
SSR(Server-Side Rendering)
SSRは、サーバー側（バックエンド）でウェブページのHTMLを生成してからクライアントに送信する手法です。
ユーザーがページにアクセスすると、サーバーが要求されたページを動的に生成し、そのHTMLをブラウザに送信します。
クライアント側でJavaScriptを実行する必要がないため、低速なデバイスやネットワーク環境でも優れたUXを提供できます。
メリット
- UXの向上
- 初期ロードが速い
- SEOに優れる
デメリット
- サーバーサイドの負荷が増加する可能性がある
- レンダリングの遅延が発生する可能性がある
- クライアント－サーバー間の通信が必要
代表的なフレームワーク
- Next.js
- Nuxt.js
ISR (Incremental Static Regeneration)
ISRは、SSGの一種であり、動的なコンテンツを含む静的サイトを構築するための手法です。
ISRでは、静的なページをビルドし、一部のページを定期的に再生成します。ユーザーがページにアクセスすると、古いバージョンの代わりに最新のページが提供されます。
これにより、ブログの最新記事や商品リストなどを自動的に更新することができます。静的ページのメリットを保ちながら、最新の情報を提供することが可能になります。
メリット
- 静的サイトのパフォーマンスとSEOを維持しながら動的なコンテンツを更新できる
- 部分的な再ビルドで効率的な更新ができる
デメリット
- 更新のタイミングによっては古い情報が表示される可能性がある
- ビルド時間とサーバーのリソースが必要
代表的なフレームワーク
- Next.js
さいごに
今回、SPA、SSG、SSR、ISRの各手法について整理したことにより、各手法のメリットとデメリットを理解することができました。
また、Next.jsを使用すれば、それらの手法を状況に応じて使い分けられることがわかったので、引き続き学習を続けたいと思います。