レンダリング

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

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

Next.jsには2つの形式のプリレンダリングがあります: 静的生成 (Static Generation) と サーバーサイドレンダリング (Server-side Rendering) です。違いは、ページ用のHTMLをいつ生成するかです。

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

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

静的生成またはサーバーサイドレンダリングと組み合わせて、クライアントサイドのデータフェッチを使用することもできます。これは、ページの一部がクライアントサイドJavaScriptによって完全にレンダリングされることを意味します。詳細については、データフェッチのドキュメントを参照してください。