コンテンツにスキップ

23

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

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

Static Generation
Server-side Rendering

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

ページごとの基盤

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

Per-page Basis

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

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

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

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

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

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

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

静的生成に焦点を当てる

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

チャプターを完了しました23

次の章

24: データあり/なしの静的生成