レンダリング

デフォルトでは、Next.js は事前にレンダリングするページをすべて生成します。つまり、クライアントサイドの JavaScript ですべてを処理するのではなく、各ページの HTML を事前に生成します。事前レンダリングは、より良いパフォーマンスと SEO をもたらす可能性があります。

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

Next.js には、静的生成とサーバーサイドレンダリングの 2 つの事前レンダリング方法があります。その違いは、ページの HTML をいつ生成するかにあります。

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

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

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