Next.jsのRenderingパターン

以下に SSG と SSR とが紹介されているものの、Next.js は静的ファイル生成もサーバー起動もでき、何がどの機能に属しているのか混乱したので自分用にまとめた。

https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering

#Pre-rendering

静的ファイル生成

next exportで HTML,CSS, JS などを生成し CDN などから配信する方法。

以下にあるようにいくつか利用できない機能がある。

https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features

サーバー起動

next startでサーバーを立ち上げる方法。

SSG

next startを実行する前に、next buildを実行する必要があるが、そこで生成されたものをそのままレスポンスとして返す。

getServerSideProps関数を定義しなければ自動的にこれになると思われる。

なお、動的なルーティングのページ(/pages/:idなど)は通常 SSG できないが、Next.js ではgetStaticPaths関数の fallback オプションを true もしくは blocking にすることで静的に生成できなかったページをレンダリングすることができる。

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

SSR

これは Next.js のサーバーへのリクエスト時に HTML を生成する。

getServerSideProps関数内で、外部サーバーからデータを取得できたりする。

#CSR

Pre-rendering で生成した HTML に対して JS で動きがつけられる。よくあるブラウザ上での JS の DOM 操作。