プリレンダリングの2つの形式

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

• 静的生成（Static Generation）は、ビルド時にHTMLを生成するプリレンダリング方式です。生成されたHTMLは各リクエストで再利用されます。
• サーバーサイドレンダリング（Server-side Rendering）は、各リクエストごとにHTMLを生成するプリレンダリング方式です。

開発モード（npm run devまたはyarn devを実行した場合）では、ページは各リクエストごとにプリレンダリングされます。これは静的生成にも適用され、開発を容易にします。本番環境では、静的生成はビルド時に一度だけ行われ、各リクエストごとには行われません。

ページごとの選択

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

静的生成とサーバーサイドレンダリングの使い分け

可能な限り静的生成（Static Generation）（データの有無にかかわらず）を使用することをお勧めします。なぜなら、ページは一度ビルドされCDNによって配信されるため、サーバーが各リクエストごとにページをレンダリングするよりもはるかに高速だからです。

以下のような多くの種類のページに静的生成を使用できます：

• マーケティングページ
• ブログ記事
• Eコマース商品リスト
• ヘルプとドキュメント

「このページをユーザーのリクエストに先立ってプリレンダリングできるか？」と自問してください。答えが「はい」なら、静的生成を選択すべきです。

一方、ユーザーのリクエストに先立ってページをプリレンダリングできない場合、静的生成は適していません。例えば、頻繁に更新されるデータを表示するページで、ページ内容が各リクエストごとに変化する場合などです。

そのような場合は、サーバーサイドレンダリング（Server-side Rendering）を使用できます。速度は遅くなりますが、プリレンダリングされたページは常に最新の状態になります。または、プリレンダリングをスキップし、クライアントサイドJavaScriptを使用して頻繁に更新されるデータを取得することもできます。

静的生成に焦点を当てます

このレッスンでは、静的生成（Static Generation）**に焦点を当てます。次のページでは、データの有無にかかわらずの静的生成について説明します。