自動静的最適化

Next.js は、ページにブロッキングデータの要件がない場合（プリレンダリング可能）、自動的にそのページが静的であると判断します。この判断は、ページ内に getServerSideProps と getInitialProps が存在しないことを基に行われます。

この機能により、Next.js は サーバーサイドレンダリング (SSR) と静的生成の両方 を含むハイブリッドアプリケーションを生成できます。

静的に生成されたページも反応的です：Next.js はクライアントサイドでアプリケーションをハイドレートし、完全なインタラクティブ性を提供します。

この機能の主な利点の1つは、最適化されたページにはサーバーサイドの計算が不要であり、複数のCDNロケーションからエンドユーザーに即座に配信できることです。結果として、ユーザーにとって 超高速 な読み込み体験が実現されます。

仕組み

ページに getServerSideProps または getInitialProps が存在する場合、Next.js はオンデマンドでページをレンダリングするモードに切り替わります（つまり サーバーサイドレンダリング (SSR) が行われます）。

上記のケースに該当しない場合、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つが示されています。