Next.jsの勉強を進める中で、
レンダリングパターンを考える時に ?? になることが多いので、
自分なりにまとめてみました。
CSR：クライアントサイドレンダリング
クライアント（ブラウザ）側でレンダリングされる
メリット
-
- 初回読み込み以降は高速
- サーバー側にリクエストを出すことがないから
- 初回読み込み以降は高速
- サーバーの負荷が軽い（Node.jsの実行は必要ないため）
- サーバーには静的なファイルの配置のみで動く
デメリット
- 初回読み込みは遅い
- SEOの懸念（検索エンジンがコンテンツをクロールしにくい）
採用タイミング
- ユーザー側で頻繁に更新が発生する、UX重視のWebアプリケーションに向いている
- 予約サービス
- ダッシュボード管理
SSR：サーバーサイドレンダリング
初期ロード時（リクエストが来たタイミング）に、サーバー側で動的にレンダリングし、クライアントに返す。
メリット
- 生成済みのHTMLを取得するので、SEOに強い
- クライアントのスペックに依存しない
デメリット
- 生成処理をサーバー側でするので、サーバーの負担が大きい
- コンテンツによっては、クライアント側でJSの実行を待たずに表示できる（ブラウザに返すだけ）ので速い
- 複雑なページや大量のデータを扱う場合は、初期ロードは遅くなる
- 2回目以降のレンダリングは、サーバーに再びリクエストを送ることになるので、CSRに比べると遅い
使用タイミング
- コンテンツ重視・SEO重視のWebアプリケーションに向いている
- ブログ
- ECサイト
- コーポレートサイト
SSG：スタティックサイトジェネレーション
- ビルド時にデータフェッチやpropsの値の決定を行い、静的なHTMLファイルを構築、それを再利用する。
- クライアントからリクエストされたら、サーバー側で構築することなく、生成済みHTMLを返却する。
メリット
- 既にビルド済みの静的ファイルを表示するだけなので、表示速度は高速
- クライアントのスペックに依存しない
- SEOに強い
デメリット
静的ファイルを再生成してデプロイする必要があるため、即時性が求められる場合には不向き
- リアルタイムのデータ変更を反映することはできない
- 修正するたび、ビルドしなければいけない
使用タイミング
- コンテンツ更新頻度が少ないWebアプリケーションに向いている
- ヘルプページ
- ポートフォリオサイト
- 静的サイトだったら、SSG一択
ISR：インクリメンタル スタティック リジェネレーション
-
ビルド時はSSGと同様にサーバーサイドでプリレンダリングされる
-
ブラウザ側で受け取った後、HTMLをキャッシュしておける
- 2回目のアクセスは、キャッシュを参照する
-
再生成時間（
revalidate）を設定できるので、一定時間ごとにデータの再取得を行い、HTMLを再生成する
メリット
- SSG・SSRと一緒
デメリット
- Vercelでしか使えない
-
revalidateで設定した秒数が経過するまでは、古い情報が返される - 再ビルドされた後、リクエストがあっても、最初はキャッシュを返される
使用タイミング
- SSRよりも更新頻度が高くないが、そこそこ更新があるWebアプリケーションに向いている
- ブログなどの記事投稿サイト
ISRは使うタイミング限られそう...
Next.js は、ページごとにレンダリング方式を選択することができるので強い！
「Next.js=アプリ開発」ってイメージがどうしてもありましたが、
むしろ静的なWebサイト制作で使うのも全然良さそうですね。
しっかり理解していないと勿体無いので、最善の選択をして構築を進めたいと思います！