レンダリング

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

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

プリレンダリング

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

• 静的生成: HTML はビルド時に生成され、各リクエストで再利用されます。
• サーバーサイドレンダリング: HTML は各リクエストごとに生成されます。

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

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

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