Next.jsのレンダリング手法
1.静的サイト作成(SSG: Static Site Generation)
2.クライアントサイドレンダリング(CSR: Client Side Rendering)
3.サーバーサイドレンダリング(SSR: Server Side Rendering)
4.インクリメンタル静的再生性(SSG: Inmcremental Static Rendering)
1.静的サイト作成(SSG: Static Site Generation)
ビルド時にgetStaticPropsという関数が呼ばれてその関数の中でAPIコールなどを行い、ページ描画時に必要なpropsを返す。
- 静的ファイルをクライアントに返すだけなの描画が高速
- ビルド時のみデータ取得を行うためリアルタイム性が求められるコンテンツには不向き
2.クライアントサイドレンダリング(CSR: Client Side Rendering)
ビルド時にデータの取得は行わずにページを描画する。描画後に非同期でデータを取得してつかのデータを描画する。
- リアルタイム性が重要なページに適している
- ページに必要なデータは後から取得、描画されるためSEO的には不向き
- 基本的にSSG、SSR、ISRと組み合わせる形で利用される
3.サーバーサイドレンダリング(SSR: Server Side Rendering)
アクセスごとにサーバーでデータを取得するため常に最新のデータを元にしたページの描画ができる。
- リアルタイム性が求められるページに適している
- SEOに有効
- サーバーでの一定の処理があるため他の手法に比べると低レイテンシーになる
4.インクリメンタル静的再生性(ISR: Inmcremental Static Rendering)
SSGの応用のような手法。事前にページを生成して配信しつつ、データに有効期限が設定でき有効期限が切れた状態でアクセスがあったときバックグラウンドで再度getStaticPropsの実行とページ描画をしサーバーに保存されているページデータを更新する。
- リクエスト時にサーバー側での処理がないためレイテンシーを高く保つことができる
- ある程度新しいデータを元にしたページを表示することができる
Next.jsでは実装する関数や、その関数が返す値によってページのレンダリング手法が切り替わる。レンダリング手法を決定する主な要素はデータ取得の関数。