Next.js非静态页面生成静态HTML文件是否正常及原因问询

结论 #

你观察到的现象完全符合Next.js Pages Router的默认设计，属于预期行为。

逻辑说明 #

Next.js Pages Router自带自动静态优化能力：只要页面没有声明getStaticProps、getStaticPaths、getServerSideProps、getInitialProps任意一种服务端渲染/静态生成相关方法，构建阶段就会自动将该页面判定为可静态化页面，直接预渲染生成静态HTML文件，也就是你看到的.next/server/pages/page1.html。

因为这类页面构建阶段没有需要注入的服务端props，所以不会生成对应的page1.json数据文件。

关于页面依赖服务端数据的补充说明 #

如果你的页面是在客户端侧（用户浏览器环境）通过fetch、useSWR、axios等方式异步请求服务端数据，这类请求逻辑不会被Next.js判定为服务端渲染逻辑，不会影响自动静态优化的判定结果，页面仍然会被预生成静态HTML，数据会在用户访问时在客户端异步拉取，这种情况不会引发功能问题，仅可能存在首次加载时的数据等待空白。

非预期场景的触发因素 #

如果你的业务要求该页面必须在服务端渲染阶段就注入数据，却生成了静态HTML，才属于异常情况，常见诱发因素如下：

• 页面原本配置的getServerSideProps/getStaticProps代码被误删除或注释
• 项目next.config.js中配置了全局静态生成规则，强制覆盖了单页面的渲染逻辑
• 页面的服务端数据请求逻辑被错误写在了仅客户端执行的useEffect等副作用函数中，没有触发Next.js的服务端渲染判定

内容的提问来源于stack exchange，提问作者Eric