自動靜態優化

如果頁面沒有阻塞性的資料需求，Next.js 會自動判斷該頁面是靜態的（可以預先渲染）。此判斷是基於頁面中是否缺少 getServerSideProps 和 getInitialProps。

這項功能讓 Next.js 能夠產生包含伺服器渲染頁面和靜態生成頁面的混合式應用程式。

靜態生成的頁面仍然具有響應性：Next.js 會在客戶端進行水合 (hydrate)，賦予其完整的互動性。

此功能的主要優點之一，是經過優化的頁面無需伺服器端運算，能立即從多個 CDN 節點串流傳送給終端使用者。結果就是為您的使用者帶來_極速_的載入體驗。

運作原理

如果頁面中包含 getServerSideProps 或 getInitialProps，Next.js 會切換為按需渲染（即伺服器端渲染 (SSR)）。

如果沒有上述情況，Next.js 會自動靜態優化您的頁面，將其預先渲染為靜態 HTML。

在預先渲染期間，路由器的 query 物件會是空的，因為在此階段我們無法提供 query 資訊。水合完成後，Next.js 會觸發應用程式更新，將路由參數填入 query 物件。

以下情況會在水合後更新查詢並觸發另一次渲染：

• 頁面使用動態路由 (dynamic-route)
• 頁面的 URL 中包含查詢值
• 在 next.config.js 中設定了重寫 (Rewrites)，因為這些可能包含需要解析並提供給 query 的參數

要判斷查詢是否已完全更新並可供使用，您可以利用 next/router 中的 isReady 欄位。

須知：使用 getStaticProps 的頁面，其動態路由 (dynamic routes) 所添加的參數，始終會出現在 query 物件中。

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

.next/server/pages/about.html

而如果您在頁面中添加 getServerSideProps，則會產出 JavaScript 檔案，如下所示：

.next/server/pages/about.js

注意事項

• 如果您的自訂 App 包含 getInitialProps，則未使用靜態生成 (Static Generation) 的頁面將停用此優化功能
• 如果您的自訂 Document 包含 getInitialProps，請務必在假設頁面是伺服器端渲染前檢查 ctx.req 是否已定義。對於預先渲染的頁面，ctx.req 會是 undefined
• 在路由器的 isReady 欄位為 true 之前，避免在渲染樹中使用 next/router 的 asPath 值。靜態優化的頁面僅在客戶端知道 asPath，伺服器端並不知曉，因此將其作為 prop 使用可能導致不一致錯誤。active-class-name 範例展示了一種將 asPath 作為 prop 使用的方式