Next.js高级特性：自动静态优化

如果没有阻塞数据要求，则Next.js会自动确定页面为静态页面（可以预呈现）。此确定是通过在页面中缺少getServerSideProps和来getInitialProps进行的。

此功能允许Next.js发出包含服务器渲染页面和静态生成页面的混合应用程序。

静态生成的页面仍然是反应性的：Next.js会充实您的应用程序客户端，使其具有完全的交互性。

此功能的主要优点之一是优化的页面不需要服务器端计算，并且可以从多个CDN位置立即流式传输到最终用户。结果是为您的用户带来超快的加载体验。

这个怎么运作

如果页面中存在getServerSideProps或getInitialProps，则Next.js将切换以按请求按请求渲染页面（即服务器端渲染）。

如果不是上述情况，则Next.js会通过将页面预呈现为静态HTML来自动自动优化页面。

在预渲染期间，路由器的query对象将为空，因为query在此阶段我们没有信息要提供。水化后，Next.js将触发对您的应用程序的更新，以在query对象中提供路由参数。

注意：添加动态路由到正在使用的页面的参数getStaticProps将始终在query对象内部可用。

next build将发出.html用于静态优化页面的文件。例如，页面的结果pages/about.js将是：

.next/server/pages/about.html

如果添加getServerSideProps到页面，它将是JavaScript，如下所示：

.next/server/pages/about.js

注意事项

• 如果您有一个自定义App，getInitialProps则将在没有“静态生成”的页面中关闭此优化。
• 如果您有一个自定义Document，请getInitialProps确保ctx.req在假定页面是在服务器端呈现之前检查是否已定义。ctx.req将undefined用于预渲染的页面。