自動静的最適化

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

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

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

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

仕組み

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

上記のケースに該当しない場合、Next.js はページを静的 HTML にプリレンダリングすることで、自動的に 静的最適化 を行います。

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