自動靜態最佳化

如果頁面沒有阻塞的資料要求，Next.js 會自動判斷該頁面是靜態的（可以預渲染）。這種判斷是透過頁面中不存在 getServerSideProps 和 getInitialProps 來完成的。

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

須知：靜態生成頁面仍然是響應式的。Next.js 會在客戶端水合您的應用程式，使其具有完全的互動性。

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

工作原理

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

如果上述情況不適用，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

注意事項

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