レンダリング

デフォルトでは、Next.jsはすべてのページをプリレンダリングします。これは、Next.jsが各ページのHTMLを事前に生成することを意味し、クライアントサイドJavaScriptですべてを行うのではありません。プリレンダリングにより、パフォーマンスとSEOの向上が期待できます。

生成された各HTMLには、そのページに必要な最小限のJavaScriptコードが関連付けられています。ページがブラウザによって読み込まれると、そのJavaScriptコードが実行され、ページが完全にインタラクティブになります（このプロセスはReactではハイドレーションと呼ばれます）。

Next.jsには2種類のプリレンダリングがあります：静的生成（Static Generation）とサーバーサイドレンダリング（Server-side Rendering）。違いはページのHTMLをいつ生成するかにあります。

重要な点として、Next.jsでは各ページに対してどのプリレンダリング形式を使用するかを選択できます。ほとんどのページに静的生成を使用し、他のページにサーバーサイドレンダリングを使用することで、「ハイブリッド」なNext.jsアプリを作成できます。

パフォーマンスの理由から、サーバーサイドレンダリングよりも静的生成を使用することを推奨します。静的に生成されたページは、追加の設定なしでCDNによってキャッシュされ、パフォーマンスを向上させることができます。ただし、場合によってはサーバーサイドレンダリングが唯一の選択肢となることもあります。

また、静的生成やサーバーサイドレンダリングと併せて、クライアントサイドのデータ取得を使用することもできます。つまり、ページの一部はクライアントサイドJavaScriptによって完全にレンダリングされる可能性があります。詳細については、データ取得のドキュメントをご覧ください。