Next.js 如何为80万+海量动态页实现数据预取 规避过长构建时间

你计算的全量串行预构建80万页需要46天的结论是成立的，全量预构建的方案完全不可行，但你可以通过Next.js的增量静态再生（ISR）能力完美匹配你的需求，同时实现接近零加载的页面访问速度，完全规避超长构建时间的问题。

核心实现逻辑 #

Next.js的ISR能力支持按需生成静态页面，不需要在构建阶段一次性生成所有80万条页面：

• 构建阶段你只需要生成访问频率最高的部分ID对应的页面，比如TOP 1万/10万条，这部分的构建耗时完全在可接受范围内
• 剩余未预生成的ID，在用户首次访问时自动触发服务端渲染，生成静态页面后缓存到服务器，后续所有用户访问该ID都会直接返回缓存的静态资源，和预构建的页面加载速度完全一致
• 你的数据1年内不会变动，只需要将静态页的缓存有效期设置为1年即可，不需要处理数据更新的逻辑

示例代码 #

// pages/my_page/[id].js （Pages Router写法，App Router逻辑类似）

// 配置需要预生成的页面路径
export async function getStaticPaths() {
  // 拉取高频访问的ID列表，可从你的业务统计后台/数据库获取
  const topIdRes = await fetch(`${apiAddress}/get_top_access_ids`)
  const topIds = await topIdRes.json()
  const paths = topIds.map(id => ({ params: { id: id.toString() } }))

  // fallback设为blocking：未预生成的页面首次访问时服务端阻塞渲染，生成后返回完整静态页
  return { paths, fallback: 'blocking' }
}

// 静态页生成时拉取数据
export async function getStaticProps({ params }) {
  const dataRes = await fetch(`${apiAddress}/my_route?id=${params.id}`, {
    timeout: 4 * 60 * 1000,
    headers: {
      Authorization: '你的授权凭证',
    }
  })
  const results = await dataRes.json()

  return {
    props: { results },
    // 缓存有效期设为1年（单位：秒），到期后才会重新拉取数据更新页面
    revalidate: 31536000
  }
}

// 页面组件直接使用props传入的data，不需要再写useEffect客户端拉取逻辑
function MyPage({ results }) {
  // 你的页面渲染逻辑
  return <div>{JSON.stringify(results)}</div>
}

export default MyPage

额外优化建议 #

• 如果希望彻底消灭首次访问用户的等待耗时，可以在业务低峰期用后台脚本遍历所有ID主动发起页面请求，静默生成所有静态页，整个过程不需要暂停服务、也不会占用构建阶段的时间
• 可以搭配CDN缓存所有静态页面，进一步降低源站压力，提升不同地区的用户访问速度

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