自動靜態優化

如果頁面沒有阻斷性資料需求，Next.js 會自動判斷該頁面為靜態頁面（可以預渲染）。這是透過頁面中沒有 `getServerSideProps` 和 `getInitialProps` 來判斷的。

此功能允許 Next.js 發佈包含**伺服器渲染和靜態生成頁面**的混合應用程式。

靜態生成的頁面仍然具有反應性：Next.js 會在客戶端對您的應用程式進行水合，使其具有完整的互動性。

此功能的主要優點之一是最佳化的頁面不需要伺服器端計算，並且可以從多個 CDN 位置立即串流到終端使用者。結果是為您的使用者帶來*超快速*的載入體驗。

運作方式

如果頁面中存在 getServerSideProps 或 getInitialProps，Next.js 將會切換為依請求按需渲染頁面（意味著伺服器端渲染）。

如果不是上述情況，Next.js 會透過預渲染頁面為靜態 HTML 自動**靜態優化**您的頁面。

在預渲染期間，路由器的 query 物件將會是空的，因為我們在此階段沒有要提供的 query 資訊。在 hydration 之後，Next.js 將會觸發應用程式的更新，以在 query 物件中提供路由參數。

hydration 後會更新 query 並觸發另一次渲染的情況如下：

• 頁面是動態路由。
• 頁面的 URL 中包含查詢值。
• 在 next.config.js 中設定了重寫，因為這些重寫可能包含需要在 query 中解析和提供的參數。

要能夠區分 query 是否已完整更新且可供使用，您可以利用 next/router 上的 isReady 欄位。

**注意事項**: 使用動態路由新增到使用 getStaticProps 的頁面的參數，將永遠在 query 物件中可用。

next build 會為靜態優化的頁面產生 .html 檔案。例如，頁面 pages/about.js 的結果如下：

.next/server/pages/about.html

如果您將 getServerSideProps 新增到頁面中，它就會變成 JavaScript，如下所示：

.next/server/pages/about.js

注意事項

• 如果您有一個带有 getInitialProps 的自訂 App，那麼在沒有靜態生成的頁面中，此優化將會被關閉。
• 如果您有一個带有 getInitialProps 的自訂 Document，請務必在假設頁面是伺服器端渲染之前檢查 ctx.req 是否已定義。對於預渲染的頁面，ctx.req 將會是 undefined。
• 在路由器的 isReady 欄位為 true 之前，避免在渲染樹中使用 next/router 上的 asPath 值。靜態優化的頁面只在客戶端而不是伺服器端知道 asPath，因此將其用作 prop 可能會導致不匹配錯誤。active-class-name 範例 展示了使用 asPath 作為 prop 的一種方法。