[Next.js] レンダリング手法の決定方法

概要

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となる。