Automatic Static Optimization

ページが同期的にデータを要求しないのであれば、そのページは静的(プリレンダリングが可能)であると Next.js が自動的に判断します。 この判断は getServerSideProps または getInitialProps がページに含まれていないことが根拠になります。

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

静的に生成されたページは依然リアクティブです: Next.js はクライアントサイドをハイドレートしてアプリケーションに完全なインタラクティブ性を与えます。

この機能の主な利点の 1 つは、最適化されたページがサーバーサイドの処理を必要としないことです。これにより、複数の CDN サーバーからエンドユーザーへと瞬時に配信されます。その結果はユーザーの超高速なローディング体験です。

どのように動作するか

getServerSidePropsgetInitialProps がページに存在すれば、Next.js はリクエストごとの要求に応じたレンダリング(サーバーサイドレンダリング)へ切り替えます。

上記のケースでなければ、 Next.js はページを静的な HTML へとプリレンダリングすることで、ページの静的な最適化を自動で行います。

プリレンダリング中は、この段階で使用できる query の情報がないため、 query は空オブジェクトになります。ハイドレーション後は、 query オブジェクト内のルートパラメータをアプリケーションに与えるように、 Next.js がアプリケーションを更新します。

ハイドレーションの後にクエリが更新され、さらにレンダリングが生じるケースは以下の通りです。

  • ページが dynamic-route である場合
  • ページが URL にクエリの値を持っている場合
  • next.config.jsRewrites が設定されている場合。これらは 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 になります。