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

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

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

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

ページ単位

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

静的生成 と サーバーサイドレンダリング を使い分ける場合

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

静的生成 は、次のような多くのタイプのページに使用できます。

• マーケティングページ
• ブログ投稿
• eコマース製品リスト
• ヘルプとドキュメント

「ユーザーのリクエストよりも**前に**このページをプリレンダリングできるか」と自問自答する必要があります。答えが「はい」の場合、静的生成 を選択する必要があります。

一方、ユーザーのリクエストよりも前にページをプリレンダリングできない場合、静的生成 は**良い**アイデアでは**ありません**。ページに頻繁に更新されるデータが表示され、リクエストごとにページの内容が変更される場合があります。

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

静的生成に焦点を当てる

このレッスンでは、静的生成 に焦点を当てます。次のページでは、**データありとなしの** 静的生成 について説明します。