自动静态优化

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 的方法。