ページが同期的にデータを要求しないのであれば、そのページは静的(プリレンダリングが可能)であると Next.js が自動的に判断します。
この判断は getServerSideProps
または getInitialProps
がページに含まれていないことが根拠になります。
この機能により、サーバーでレンダリングされたページと静的に生成されたページの両方 を含むハイブリッドなアプリケーションを提供することが可能になります。
静的に生成されたページは依然リアクティブです: Next.js はクライアントサイドをハイドレートしてアプリケーションに完全なインタラクティブ性を与えます。
この機能の主な利点の 1 つは、最適化されたページがサーバーサイドの処理を必要としないことです。これにより、複数の CDN サーバーからエンドユーザーへと瞬時に配信されます。その結果はユーザーの超高速なローディング体験です。
getServerSideProps
か getInitialProps
がページに存在すれば、Next.js はリクエストごとの要求に応じたレンダリング(サーバーサイドレンダリング)へ切り替えます。
上記のケースでなければ、 Next.js はページを静的な HTML へとプリレンダリングすることで、ページの静的な最適化を自動で行います。
プリレンダリング中は、この段階で使用できる query
の情報がないため、 query
は空オブジェクトになります。ハイドレーション後は、 query
オブジェクト内のルートパラメータをアプリケーションに与えるように、 Next.js がアプリケーションを更新します。
備考: 動的なルーティングと共に
getStaticProps
を用いたページに与えられたパラメータは、いつでもquery
オブジェクト内で使用可能です。
next build
は静的最適化がされたページに対して .html
ファイルを出力します。例えば、 pages/about.js
のページに対するビルド結果は以下のようになります:
.next/server/static/${BUILD_ID}/about.html
getServerSideProps
をページに加えると、今度はビルド結果が以下のような JavaScript ファイルになります:
.next/server/static/${BUILD_ID}/about.js
開発中は pages/about.js
が最適化されているかどうかを内部の静的最適化インディケーターによって知ることができます。
getInitialProps
を用いたカスタム Document
の場合は、ページがサーバーサイドでレンダリングされると仮定する前に ctx.req
が定義されているかどうかを確認してください。ctx.req
はプリレンダリングされるページでは undefined
になります。