レンダリング

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

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

プリレンダリング

Next.js には、静的生成とサーバーサイドレンダリングという 2 つのプリレンダリング形式があります。違いは、ページの HTML を生成するタイミングにあります。

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

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

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

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