自動靜態優化

Next.js 會自動判斷頁面是否為靜態（可以預先渲染），如果它沒有阻塞資料需求。此判斷依據頁面中是否缺少 getServerSideProps 和 getInitialProps 而定。

此功能讓 Next.js 可以發布包含伺服器渲染和靜態產生頁面的混合應用程式。

小知識：靜態產生的頁面仍然是反應式的。Next.js 將在客戶端補水您的應用程式，使其具有完整的互動性。

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

運作方式

如果頁面中存在 getServerSideProps 或 getInitialProps，Next.js 將切換為按需、按請求渲染頁面（表示伺服器端渲染）。

如果上述情況並非如此，Next.js 將通過將頁面預先渲染為靜態 HTML 來自動靜態優化您的頁面。

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

在以下情況下，query 將在補水後更新，觸發另一次渲染：

• 頁面是動態路由。
• 頁面的 URL 中有 query 值。
• Rewrites 在您的 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 的方法。