自动静态优化

如果页面没有阻塞的数据要求，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 的一种方法。