レンダリング

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

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

事前レンダリング

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

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

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

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

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