自動靜態優化

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

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

須知事項：靜態生成的頁面仍然具有互動性。Next.js 會在客戶端對您的應用程式進行水合 (hydrate)，以賦予其完整的互動功能。

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

運作原理

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

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

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

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

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

若要判斷 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 使用的方法。