自動静的最適化

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 でリライトが設定されている（これらにはパースおよび 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つの方法を示しています。