Automatic Static Optimization
あおけんNext.jsは、ブロッキングデータの要求がない場合、
そのページが静的（プリレンダリング可能）であると自動的に判断する。
この判断は、ページにgetServerSidePropsとgetInitialPropsがないことで行われる。
この機能により、Next.jsはサーバーレンダリングと静的生成の両方のページを含むハイブリッドアプリケーションを作成できる。
静的に生成されたページはまだリアクティブです： Next.jsはアプリケーションをクライアントサイドでハイドレートし、完全なインタラクティブ性を与えます。
この機能の主な利点の1つは、
最適化されたページはサーバーサイドの計算を必要とせず、
複数のCDNロケーションからエンドユーザーに即座にストリーミングできること。
その結果、ユーザーにとって超高速のロード体験が得られる。
あおけんHow it works
getServerSidePropsまたはgetInitialPropsがページに存在する場合、
Next.jsはオンデマンドでリクエストごとにページをレンダリングするように切り替える（サーバーサイドレンダリングを意味する）。
上記に当てはまらない場合、
Next.jsはページを静的HTMLにプリレンダリングすることで、
自動的にページを静的に最適化する。
プリレンダリング中は、ルーターのqueryオブジェクトは空になる。
ハイドレーションの後、Next.jsはアプリケーションの更新をトリガーして、
queryオブジェクトにルートパラメータを提供。
ハイドレーション後にクエリーが更新され、
別のレンダーがトリガーされるケースは以下の通り。
- このページはダイナミック・ルートである
- このページはURLにクエリー値を持っている
- リライトは、next.config.jsで設定。リライトには、クエリー内で解析して提供する必要のあるパラメーターがある場合がある。
クエリが完全に更新され、使用可能かどうかを区別できるようにするには、next/routerのisReadyフィールドを活用。
getStaticPropsを使用しているページに動的なルートで追加されたパラメータは、
常にクエリオブジェクトの内部で利用可能です。
.next/server/pages/about.html
そして、ページにgetServerSidePropsを追加すると、次のようにJavaScriptになる
.next/server/pages/about.js
Caveats
その1
カスタムAppでgetInitialPropsを使用している場合、Static Generationを使用しないページではこの最適化はオフ。
その2
getInitialPropsを持つカスタムDocumentがある場合は、
ページがサーバサイドレンダリングされると仮定する前に、
ctx.reqが定義されているかどうかを確認。
プリレンダリングされたページでは、ctx.reqは定義されていない。
その3
ルータのisReadyフィールドがtrueになるまで、
レンダリングツリーのnext/routerでasPath値を使用することは避ける。
静的に最適化されたページは、クライアント上のasPathしか知らず、
サーバ上のasPathは知らないため、propとして使用するとミスマッチエラーにつながる可能性がある。
active-class-nameの例はasPathをpropとして使う1つの方法を示す。