23
チャプター23
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によって配信されるため、サーバーが各リクエストでページをレンダリングするよりもはるかに高速だからです。
静的生成は、以下のような多くの種類のページに利用できます。
- マーケティングページ
- ブログ記事
- ECサイトの商品リスト
- ヘルプとドキュメント
自問自答してください。「ユーザーのリクエストより前にこのページをプリレンダリングできるか?」答えが「はい」なら、静的生成を選択すべきです。
一方、ユーザーのリクエストより前にページをプリレンダリングできない場合、静的生成は良いアイデアではありません。おそらく、ページに頻繁に更新されるデータが表示され、ページの内容がリクエストごとに変わる場合などです。
その場合、サーバーサイドレンダリングを使用できます。速度は遅くなりますが、プリレンダリングされたページは常に最新の状態になります。あるいは、プリレンダリングをスキップし、クライアントサイドJavaScriptを使用して頻繁に更新されるデータを表示することも可能です。
静的生成に焦点を当てる
このレッスンでは、静的生成に焦点を当てます。次のページでは、データあり/なしの静的生成について説明します。
これは役立ちましたか?