自動静的最適化

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

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

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