从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案

问题背景

最近开发了一个基于Next.js的AI聊天应用,使用@microsoft/fetch-event-source实现客户端流式接收(可以支持POST的流式响应库),服务端使用OpenAI的Nodejs的SDK调用Gemini等AI模型。本地开发时一切正常,但部署到Vercel后出现诡异现象:流式响应会随机卡住,特别是处理复杂问题时。

通过查看Vercel日志发现关键报错:

bash 复制代码
Vercel Runtime Timeout Error: Task timed out after 10 seconds

问题根源

通过日志分析和文档查阅,发现Vercel的运行限制:

  • 🕑 免费版 Serverless Function 默认执行时间:10秒,最大执行时间:60秒
  • ⏳ 即使配置到60秒,处理复杂问题时仍会超时
类别 Default 默认 Maximum 最大
Hobby 业余爱好 10秒 60秒
Pro 专业 15秒 300秒
Enterprise 企业 15秒 900秒

解决方案演进

方案一:延长默认执行时间

在项目根目录创建vercel.json

json 复制代码
{
  "functions": {
    "api/test.js": {
      "maxDuration": 30 // This function can run for a maximum of 30 seconds
    },
    "api/*.js": {
      "maxDuration": 15 // These functions can run for a maximum of 15 seconds
    }
  }
}

注意

  • Hobby的免费用户最多只能配置60秒,遇到问AI个比较大比较复杂的问题还是很容易超时。

执行时长官方文档:vercel.com/docs/functi...

方案二:启用Fluid Compute

Fluid compute 提供了无服务器灵活性和类似服务器功能的结合。与传统的无服务器架构不同,传统架构可能面临冷启动和功能受限等问题,fluid compute 提供了一种混合解决方案。它克服了无服务器和基于服务器方法的局限性,提供了两者的优势,启用后:

  • 默认超时延长至60秒
  • 但最大执行时间仍然是60秒

Fluid compute官方文档vercel.com/docs/functi...

类别 Default 默认 Maximum 最大
Hobby 业余爱好 60秒 60秒
Pro 专业 90秒 800秒
Enterprise 企业 90秒 800秒

方案三:使用Edge Runtime

Functions using the Edge runtime do not have a maximum duration. They must begin sending a response within 25 seconds and can continue streaming a response beyond that time.

使用Edge运行时的函数没有最大执行时长限制。它们必须在 25 秒内开始发送响应,并可以在此之后继续流式传输响应。

Edge运行时构建于 V8 引擎之上,使其能够在无需容器或虚拟机的隔离执行环境中运行。

了解更多Edge Runtine官方文档:

改造实践

  1. 修改API路由配置(只需要在src/api/**/route.ts里加上这句代码即可):
javascript 复制代码
// pages/api/chat.js
export const runtime = 'edge';

核心优势对比

特性 Serverless Runtime Edge Runtime
超时限制 10-60秒 首包30秒 + 流不限时
冷启动 几乎无
全局变量访问 支持 受限
地理位置 固定区域 靠近用户
典型延迟 100-500ms 50-150ms

📌 技术原理:Edge Runtime基于V8 Isolates实现,具有毫秒级启动特性。流式响应时首包响应后,后续数据块通过持久的HTTP连接传输,不受Vercel服务端超时限制。

总结

  1. 对于需要持续数据流的场景(如AI对话、实时日志) 优先使用Edge Runtime
  2. Edge优势场景
    • 需要低延迟响应的应用
    • 流式数据传输场景
    • 地理位置敏感型服务
  3. 适用边界
    • 不适合需要访问Node.js原生模块的场景
    • 内存密集型任务仍需使用Serverless

以下是我遇到这个问题的AI问答工具的地址,项目完全用的cursor问答生成,目前bug还挺多,大佬们可浅尝😊:lujiangc.com/ai-assistan...

同时也分享一些可以免费白嫖各种AI模型的API的平台吧:

相关推荐
CharlesYu013 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
平头哥技术团队3 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰5 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面5 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方5 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结5 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言6 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码
IT_陈寒6 小时前
Vue的computed属性竟然坑了我一把
前端·人工智能·后端
威斯软科的老司机7 小时前
通俗讲解 CNN 图像识别、向量 Embedding、Softmax 概率计算这三块的简化原理
前端·人工智能·ui·数字孪生
泯泷7 小时前
手搓JSVM第 12 篇:完整最小 JSVM 实现与源码设计复盘
前端·javascript·前端框架