Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

自動静的最適化

Next.jsは、ブロッキングデータ要件がない場合、ページが静的(プリレンダリング可能)であると自動的に判断します。この判断は、ページにgetServerSidePropsgetInitialPropsがないことによって行われます。

この機能により、Next.jsはサーバーレンダリングされたページと静的に生成されたページの両方を含むハイブリッドアプリケーションを生成できます。

補足: 静的に生成されたページも反応的です。Next.jsはクライアント側でアプリケーションをハイドレーションし、完全なインタラクティブ性を提供します。

この機能の主な利点の1つは、最適化されたページがサーバー側の計算を必要とせず、複数のCDNロケーションからエンドユーザーに即座にストリーミングできることです。結果として、ユーザーに対して_非常に高速_な読み込み体験を提供します。

仕組み

ページにgetServerSidePropsまたはgetInitialPropsが存在する場合、Next.jsはページをオンデマンド、リクエストごとにレンダリングするよう切り替えます(サーバーサイドレンダリングを意味します)。

上記に該当しない場合、Next.jsはページを静的HTMLにプリレンダリングすることで、自動的にページを静的に最適化します。

プリレンダリング中、ルーターのqueryオブジェクトは空になります。これは、このフェーズではquery情報を提供できないためです。ハイドレーション後、Next.jsはアプリケーションを更新して、queryオブジェクトにルートパラメータを提供します。

ハイドレーション後にqueryが更新され、別のレンダリングがトリガーされるケースは以下の通りです:

  • ページが動的ルートである。
  • ページにURLにクエリ値がある。
  • next.config.jsリライトが設定されている(これらはパースおよび提供が必要なパラメータを持つ可能性がある)。

クエリが完全に更新され、使用可能かどうかを判断するには、next/routerisReadyフィールドを活用できます。

補足: getStaticPropsを使用しているページに追加された動的ルートのパラメータは、常にqueryオブジェクト内で利用可能です。

next buildは、静的に最適化されたページに対して.htmlファイルを出力します。例えば、pages/about.jsページの結果は次のようになります:

Terminal
.next/server/pages/about.html

ページにgetServerSidePropsを追加すると、次のようにJavaScriptになります:

Terminal
.next/server/pages/about.js

注意点

  • getInitialPropsを持つカスタムAppがある場合、静的生成のないページでこの最適化は無効になります。
  • getInitialPropsを持つカスタムDocumentがある場合、ページがサーバーサイドレンダリングされると想定する前にctx.reqが定義されているかを確認してください。プリレンダリングされたページではctx.requndefinedになります。
  • ルーターのisReadyフィールドがtrueになるまで、レンダリングツリーでnext/routerasPath値を使用しないでください。静的に最適化されたページは、サーバーではなくクライアント上でのみasPathを認識するため、プロパティとして使用すると不一致エラーを引き起こす可能性があります。active-class-nameの例は、asPathをプロパティとして使用する1つの方法を示しています。