部署在Vercel的Next.js SSG页面首次加载缓慢原因咨询

• CDN节点未预热：Vercel的全球CDN节点需要首次请求触发回源拉取静态文件，要是你第一次访问的是还没缓存该页面的边缘节点，就会出现加载延迟。等这个节点缓存了文件，后续访问速度就正常了。可以用脚本批量请求关键页面，主动预热常用区域的CDN节点来避免这个问题。

• 页面带了未预加载的动态资源：虽说页面本身是SSG生成的，但如果页面里有客户端发起的API请求、没预加载的第三方脚本（比如统计、广告），或是用了next/dynamic且没开SSR的组件，这些内容会在首次加载时额外发请求拖慢速度。你可以检查页面代码，把必要的客户端请求改成在getStaticProps里预获取并嵌入页面，或者用next/script的beforeInteractive策略预加载第三方脚本。

• 代码分割后的chunk首次加载：Next.js会自动给页面JS做代码分割，首次访问时浏览器得下载对应页面的chunk文件，这个过程受chunk大小和用户网络影响。等浏览器缓存了chunk，加载就快了。你可以分析next build的打包报告，优化大chunk——比如拆分大组件、用动态导入懒加载非核心模块，来缩小首次加载的资源体积。

• 隐性触发了增量静态再生（ISR）：要是你的页面虽然标记为SSG，但实际上在getStaticProps里配置了revalidate参数（哪怕值很高），首次访问时如果缓存过期了（比如部署后很久没访问），Vercel会在后台重新生成页面，这时候用户的首次请求就得等回源生成，后续缓存更新后就快了。你可以检查getStaticProps里有没有revalidate，不需要ISR的话就删掉这个参数。

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