Next.jsの4つのレンダリング手法について
静的サイト生成(SSG: Static Site Generation)
- ビルド時にAPIを呼び出しデータを取得、ページを描画して静的ファイルとして生成する
- 生成した静的ファイルはビルド結果に保持され、ページアクセス時にはその静的ファイルをクライアントに送る
メリット
- 初期描画が高速(静的ファイルをクライアントに渡すだけ)
- SEOに対して有効
デメリット
- データ取得がビルド時のみで、古いデータが表示される
使い時
- ビルド後に表示内容が変わらないページ
- 初期描画後にデータを取得・表示するページ
クライアントサイドレンダリング(CSR: Client Side Rendering)
- ブラウザ側で初期描画を行う
- Reactアプリっぽい描画方法
メリット
- リアルタイム性が高い
デメリット
- SEOに対して有効ではない
使い時
- リアルタイム性が重要なページ
サーバーサイドレンダリング(SSR: Server Side Rendering)
- ページにアクセスするたびに、サーバー側でgetServerSidePropsが呼び出され、その結果のProps(データ)を元にサーバー側でページの描画を行い、クライアントで表示する
メリット
- 最新のデータでページの初期描画ができる
- SEOに対して有効らしい
デメリット
- アクセスごとにサーバーで処理を行うため、描画時間が長くなる可能性がある
使い時
- 常に最新のデータを表示させたいページ
インクリメンタル静的再生成(ISR: Incremental Static Regeneration)
- SSGのように事前にページを生成しておく
- クライアントへ渡す静的ファイルに有効期限を設定でき、切れていた場合のアクセスに対してはgetStaticPropsを実行・ページ描画をし、サーバーに保存しているページデータを新しくする
メリット
- そこそこ最新のデータを表示しつつ、初期描画が高速
デメリット
- 常に最新のデータというわけではない
