いちから Next.js のレンダリング方法を学ぶ
これは筆者が Next.js のレンダリング方法をいちから学ぶための記事です。
レンダリング方法について
Next.js のレンダリング方法には、以下の4つがあります。
CSR (Client Side Rendering)
ブラウザ上ですべての処理が行われます。クライアントサイドのリクエストに対して一旦空の HTML と JS が返され、その後 JS を実行することで画面を描画します。
HTML が最初に取得される段階では HTML の構築が完了していない状態であり、利用しているクローラーによっては正常なページ読み込みが行われない可能性があります（例えば Google のクローラーでは JS も実行可能でありこの問題はパスされます）。これは SEO に大きく関わる問題であり、こういった課題を解決するために生まれたのが後述の SSR です。CSR は通常の React 開発におけるレンダリング方法でもあります。
SSR (Server Side Rendering)
サーバーサイド（Node.js）にリクエストが来たタイミングで動的に HTML を生成し、画面が描画されます。データフェッチが必要な場合は予めサーバーサイドから API サーバに対してデータリクエストが行われ、これをもとに HTML が生成されるため、クライアントサイドに返却された時点で既に HTML の構築が完了しています。これにより、CSR での SEO の問題も解消されています。
例えば CSR ではクライアントサイドで HTML の生成が行われるのに対し、 SSR ではサーバーサイド上で HTML の生成が行われることが特徴です。
CSR, SSR ともに HTML の生成は HTTP リクエストが発生した後であり、表示が遅くなってしまうことが共通しています。
SSG (Static Site Generation)
ビルド時に HTML を生成します（データフェッチ等も含めます）。クライアントからリクエストがあったときに生成された HTML が返されるだけなので、表示がとても高速です。また、SEO も問題ありません。
ビルド時の HTML がそのまま描画されるため、動的コンテンツを利用する場合は都度ビルドが発生してしまうこととなり、不向きです。
ISR (Incremental Static Regeneration)
SSG と同様に、ビルド時に HTML を生成します。また、生成から一定時間経過した後にアクセスがあると、既に生成している HTML を一旦渡しつつ、サーバーサイドで HTML が更新されます。ここで生成された最新の HTML は、次にアクセスがあったときに渡されます。
SSG を生かしつつ、動的コンテンツの更新も行うことができます。
どのレンダリング方法を選択するべきか
現在は、静的なサイトであれば SSG を、動的なサイトであれば SSR を選択することが一般的なようです。
Discussion