Next.js 13 App目录静态页面部署后仍调用外部API问题排查

可能的原因及对应解决办法 #

1. 数据获取代码位于客户端组件中 #

如果这段代码所在的组件顶部声明了'use client'，组件会在浏览器端执行——静态生成的只是页面的HTML外壳，客户端组件的逻辑会在用户加载页面时重新运行，自然会触发API调用。

解决：将数据获取逻辑移到无'use client'的服务器组件中，把获取到的seeds、apps等数据作为props传递给需要的客户端组件。如果必须在客户端组件中使用数据，也可以在服务器组件中预取数据后再传入。

2. 页面被强制设置为动态渲染 #

如果你的页面组件（page.js）中添加了以下配置，Next.js会强制页面每次请求都在服务器端重新渲染，导致API在每次请求时被调用：

export const dynamic = 'force-dynamic'
// 或者
export const revalidate = 0

解决：移除这些强制动态的配置，或者显式设置强制静态：

export const dynamic = 'force-static'

这样Next.js会在构建时完成数据预取和页面静态生成，生产环境不会再触发API调用。

3. 数据获取函数依赖运行时动态值 #

如果getSeeds()或getAllApps()内部使用了只能在运行时获取的值（比如请求头、Cookie、动态生成的API地址），Next.js会将页面标记为动态渲染，无法在构建时预生成数据。

解决：检查这两个函数的实现，确保所有参数、API地址都能在构建时确定，避免依赖运行时才能拿到的变量。如果确实需要动态值，只能接受动态渲染，或者改用ISR（增量静态再生）配置合理的revalidate时间。

4. 静态导出配置缺失 #

如果你的目标是完全静态导出（不依赖Next.js服务器），但next.config.js中没有设置output: 'export'，默认的SSG模式可能会在某些场景下触发数据重新获取（比如ISR的默认行为）。

解决：在next.config.js中添加静态导出配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

配置后构建时会生成完全静态的HTML/CSS/JS文件，部署后不会有服务器端的API调用。

内容的提问来源于stack exchange，提问作者Jad Al-Hamwi