自動静的最適化

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

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

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

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

仕組み

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

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

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

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

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

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

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

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

.next/server/pages/about.html

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

.next/server/pages/about.js

注意点

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