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

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

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

ページ単位での適用

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

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

可能な限り静的生成（データあり・なし）を使用することをお勧めします。なぜなら、ページは一度ビルドしてCDNで提供できるため、サーバーがリクエストごとにページをレンダリングするよりもはるかに高速だからです。

静的生成は、以下のような多くの種類のページで使用できます。

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

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

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

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

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

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