概要
Next.jsにはSSG、SSR、ISR、CSRの4種類のレンダリング手法がある。
- SSG
ビルド時にgetStaticProps関数が呼ばれ、その中でAPIコールなどを行い必要なデータをpropsとして返す。
ビルド結果は静的ファイルとして保存される。 - SSR
ページへのアクセスがある度にgetServerSideProps関数が呼ばれ、関数内で生成されたpropsを元にページをサーバ側で描画してクライアントに渡す。
常に最新のデータを表示させたい場合に適している。 - ISR
ページへのアクセスがあると、事前にSSGでレンダリングしてあるページデータをクライアントに渡す。
このデータに有効期限を設定でき、有効期限が切れた状態でアクセスがあった場合はページを再生成する。 - CSR
ブラウザでの初期描画後にAPIコールなどでデータを取得して描画する。 CSRのみで利用されることはなく、SSG, SSR, ISRと組み合わせて利用される。 リアルタイム性が重要なページに適している。
SSGもSSRも初回のレンダリング（ブラウザに返されるHTML）であり、初期描画後はCSRにより動的にHTMLが更新される。 （通常のReactアプリケーションと同様にAPIなどからデータを取得して描画を動的に変化させる）
レンダリング手法の決定方法
どのレンダリング手法になるかは、以下の内容で決定する。
- データ取得をgetStaticProps関数内に実装する場合
SSGとなる。
ただし、戻り値のオブジェクトにrevalidateプロパティが存在する場合はISR。
データ取得を一切行わないページコンポーネントもSSGとなる。 - データ取得をgetServerSideProps関数内に実装する場合
SSRとなる。 - データ取得をgetStaticProps, getServerSideProps以外の関数内に実装する場合
CSRとなる。