自動静的最適化
Next.jsは、ブロッキングデータ要件がない場合、ページが静的(プリレンダリング可能)であると自動的に判断します。この判断は、ページにgetServerSideProps
とgetInitialProps
がないことによって行われます。
この機能により、Next.jsはサーバーレンダリングされたページと静的に生成されたページの両方を含むハイブリッドアプリケーションを生成できます。
補足: 静的に生成されたページも反応的です。Next.jsはクライアント側でアプリケーションをハイドレーションし、完全なインタラクティブ性を提供します。
この機能の主な利点の1つは、最適化されたページがサーバー側の計算を必要とせず、複数のCDNロケーションからエンドユーザーに即座にストリーミングできることです。結果として、ユーザーに対して_非常に高速_な読み込み体験を提供します。
仕組み
ページにgetServerSideProps
またはgetInitialProps
が存在する場合、Next.jsはページをオンデマンド、リクエストごとにレンダリングするよう切り替えます(サーバーサイドレンダリングを意味します)。
上記に該当しない場合、Next.jsはページを静的HTMLにプリレンダリングすることで、自動的にページを静的に最適化します。
プリレンダリング中、ルーターのquery
オブジェクトは空になります。これは、このフェーズではquery
情報を提供できないためです。ハイドレーション後、Next.jsはアプリケーションを更新して、query
オブジェクトにルートパラメータを提供します。
ハイドレーション後にquery
が更新され、別のレンダリングがトリガーされるケースは以下の通りです:
クエリが完全に更新され、使用可能かどうかを判断するには、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つの方法を示しています。