Automatic Static Optimization

Next.js は、ページにブロッキングデータの要件がない場合、自動的にページが静的(先読み可能)であると判断します。この判断は、ページにgetServerSidePropsおよびgetInitialPropsが存在しないことによって行われます。

この機能により、Next.js はserver 側でレンダリングされたページと静的に生成されたページの両方を含むハイブリッドアプリケーションを出力することができます。

静的に生成されたページもまだリアクティブです：Next.js は Client 側であなたのアプリケーションをハイドレートし、それに完全な対話型性を与えます。

この機能の主な利点の一つは、最適化されたページが requireserver 側の server-side 計算を必要とせず、複数の CDN ロケーションからエンドユーザーに即座に Streaming できることです。結果として、あなたのユーザーには超高速な loading 体験が提供されます。

How it works

ページにgetServerSidePropsまたはgetInitialPropsが存在する場合、Next.js は、オンデマンドで、Request ごとにページを render するように切り替わります(つまりServer-Side Renderingを意味します)。

上記が話されている状況でない場合、Next.js は、ページを静的な HTML にプレレンダリングすることで、あなたのページを静的に最適化します。

プレ rendering 中、routers の query object は、このフェーズ中に提供する query 情報がないため、empty になります。ハイドレーション後、Next.js はあなたのアプリケーションに更新をトリガーして、query object の中に route パラメータを提供します。

hydration がトリガーされた後に query が更新されるケースで、もう一度 render がトリガーされるケースは以下の通りです：

• そのページはdynamic-routeです。
• そのページは URL 内に query の値を持っています。
• Rewritesはあなたのnext.config.jsに設定されています。これらはパースされ、queryで提供する必要がある可能性のあるパラメーターを持つことができます。

query が完全に更新され、使用の準備ができているかどうかを区別するために、 next/routerの isReady フィールドを利用できます。

Good to know: dynamic routesでページに追加されたパラメータは、getStaticPropsを使用しているページでも常にquery object 内で利用可能です。

next buildは、静的に最適化されたページ用の.htmlファイルを出力します。例えば、ページpages/about.jsの結果は次のようになります：

.next/server/pages/about.html

そして、ページに getServerSideProps を追加すると、それは次のように JavaScript になります。

.next/server/pages/about.js

Caveats

• もしcustom Appを持っていて、getInitialPropsがある場合、この最適化はStatic Generationがないページではオフになります。
• あなたがカスタム Documentを持っていて、getInitialPropsがある場合は、ページが server-side でレンダリングされていると想定する前に ctx.reqが定義されているか確認してください。プレレンダリングされたページの ctx.req は undefined になります。
• レンダリングツリーでnext/routerのasPath value を使用するのは、router のisReadyフィールドがtrueになるまで避けてください。静的に最適化されたページは、asPathを client ではなく server でのみ認識するため、プロパティとして使用するとミスマッチ error を引き起こす可能性があります。 active-class-name example は、asPathをプロパティとして使用する 1 つの方法を示しています。