自動静的最適化

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`に提供する必要があるパラメーターがある可能性があります。

`query`が完全に更新され、使用準備が整っているかどうかを区別するには、`next/router`の`isReady`フィールドを利用できます。

重要な情報: `getStaticProps`を使用しているページに動的ルートで追加されたパラメーターは、常に`query`オブジェクト内で使用できます。

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

.next/server/pages/about.html

そして、ページに`getServerSideProps`を追加すると、次のようになります。

.next/server/pages/about.js

注意点

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