自動静的最適化
Next.js は、ブロックするデータ要件がない場合、ページが静的である（プリレンダリング可能である）と自動的に判断します。この判断は、ページに `getServerSideProps` および `getInitialProps` が存在しないことによって行われます。
この機能により、Next.js は**サーバーレンダリングされたページと静的に生成されたページの両方を含む**ハイブリッドアプリケーションを出力できます。
補足: 静的に生成されたページは、依然としてインタラクティブです。Next.js は、完全なインタラクティブ性を提供するために、クライアント側でアプリケーションをハイドレーションします。
この機能の主な利点の1つは、最適化されたページがサーバーサイドの計算を必要とせず、複数のCDNロケーションからエンドユーザーに即座にストリーミングできることです。その結果、ユーザーは超高速な読み込み体験を得ることができます。
仕組み
ページに `getServerSideProps` または `getInitialProps` が存在する場合、Next.js はオンデマンドで、リクエストごとにページをレンダリングするよう切り替えます（これはサーバーサイドレンダリングを意味します）。
上記のケースに該当しない場合、Next.js はページを静的HTMLにプリレンダリングすることで、自動的にページを**静的に最適化**します。
プリレンダリング中、このフェーズでは提供する `query` 情報がないため、ルーターの `query` オブジェクトは空になります。ハイドレーション後、Next.js はアプリケーションの更新をトリガーし、`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注意事項
- カスタム `App` に `getInitialProps` がある場合、静的生成を使用しないページではこの最適化は無効になります。
- カスタム `Document` に `getInitialProps` がある場合、ページがサーバーサイドレンダリングされていると仮定する前に、`ctx.req` が定義されているか確認してください。プリレンダリングされたページでは `ctx.req` は `undefined` になります。
- ルーターの `isReady` フィールドが `true` になるまでは、レンダリングツリー内で `next/router` の `asPath` 値を使用しないでください。静的に最適化されたページはクライアント側でのみ `asPath` を認識し、サーバー側では認識しないため、これをプロップとして使用するとミスマッチエラーが発生する可能性があります。`active-class-name` の例は、`asPath` をプロップとして使用する1つの方法を示しています。
参考になりましたか？