【Next.js】ページのレンダリング種別(SSR/SG/ISR/Static)の決定・確認方法

JavaScript

Next.jsではページごと（pagesディレクトリ直下のコンポーネントごと）にレンダリングの種類を決められます。今回はレンダリング種別の決められ方と確認方法について紹介します。

検証環境のnextは11.1.2を利用しています。

ページのレンダリング種別の決定方法

ページのレンダリング種別がどのように決まるのか紹介します。

getInitialPropsもしくはgetServerSidePropsが定義されている場合

SSR（Server-side Rendering）になります。
SSRはクライアントサイド（ブラウザ）からのリクエストに応じてサーバサイドでHTMLを生成し、レスポンスとして返す手法です。

Next.jsのルータ機能（next/link, next/router）を利用した画面遷移（CSR）の場合はHTMLの代わりにJSONをレスポンスとして返します。

SSRのJSONを利用したCSRの仕組みの詳細解説は【Next.js】next/linkの画面遷移（CSR）から画面反映までの流れの図解解説で紹介しています。

getStaticPropsが定義されている場合

SG（Static Generation）になります。
SGとは事前に静的なHTMLを生成しておき、クライアントサイドからリクエストがあった際にレスポンスとして返す手法です。

SGではHTMLに加えてJSONも生成します。JSONはNext.jsのルータ機能を利用した画面遷移（CSR）の場合に利用されます。

なお、開発モード（npm run devあるいはyarn dev）で起動する場合、SGが採用されているページもSSRとなります。1

初期Propsが定義されていない場合

先にあげたgetInitialProps、getServerSideProps、getStaticPropsの定義がないページのことです。当該ページは静的なHTMLをレンダリングします。

revalidateを利用したgetStaticPropsが定義されている場合

ISR（Incremental Static Regeneration）になります。
ISRとはSGに有効期限の概念が追加されたレンダリング手法です。ISRは有効期限がすぎると事前に生成した静的ページを再作成します。

ページのレンダリング種別の確認方法

next buildの実行ログをみることで採用されているレンダリングの種類がわかります。
next buildの実行ログにはレンダリングの種類を表す記号が各ページに付与されるため、記号を確認することでレンダリングの種類がわかります。

具体例は以下の通りです。

Page                                Size     First Load JS
┌ ● /                               8.9 kB         75.9 kB  # SSG
├   └ css/1fc5448df6c342766f56.css  971 B
├   /_app                           0 B              67 kB
├ ○ /404                            194 B          67.1 kB  # Static
└ λ /todos/[id]                     339 B          67.3 kB  # SSR
+ First Load JS shared by all       67 kB
  ├ chunks/framework.b97a0e.js      42 kB
  ├ chunks/main.c4f254.js           23.6 kB
  ├ chunks/pages/_app.d746eb.js     556 B
  ├ chunks/webpack.fb7614.js        770 B
  └ css/d956bfbeac7a7df3d68f.css    272 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

  1. Next.js『Pre-rendering and Data Fetching』 ↩
RECOMMEND