Rendering

defaultで、Next.jsはすべてのページを事前にレンダリングします。これは、Next.jsが各ページのHTMLをあらかじめ生成し、それがすべてClientサイドのJavaScriptによって行われるのではないことを意味します。事前レンダリングは、パフォーマンスとSEOの向上につながる可能性があります。

それぞれ生成されたHTMLは、そのページに必要な最小限のJavaScript codeと関連付けられています。ページがブラウザによって読み込まれると、そのJavaScript codeが実行され、ページを完全に対話型にします(このプロセスはReactではhydration と呼ばれています)。

Pre-rendering

Next.js は、事前レンダリングに2つの形式があります： 静的生成と ** Server-side Rendering**。違いは、ページの HTML をいつ生成するかにあります。

• 静的生成: HTMLはbuild時に生成され、各requestで再利用されます。
• Server-side Rendering : **各々の request **において、 HTML が生成されます。

重要な点として、Next.jsは各ページで使用したいプレレンダリング形式を選択できます。ほとんどのページで静的生成を使用し、他のページでServer-side Renderingを使用することで、"ハイブリッド"のNext.js appを作成することができます。

パフォーマンスの観点から、Server-side RenderingよりもStatic Generationの使用を推奨します。静的に生成されたページは、パフォーマンスを向上させるためにCDNにより追加の設定なしでキャッシュできます。ただし、一部のケースでは、Server-side Renderingが唯一の選択肢になるかもしれません。

Yまた、静的生成やServer-side RenderingとともにClient側データ取得を使用することもできます。つまり、ページの一部はClient側のJavaScriptによって完全にレンダリングできるということです。詳しくは、Data Fetchingのドキュメンテーションをご覧ください。