从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的平台吧:

相关推荐
Mintopia23 分钟前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js
夕水39 分钟前
自动化按需导入组件库的工具rust版本完成开源了
前端·rust·trae
JarvanMo2 小时前
借助FlutterFire CLI实现Flutter与Firebase的多环境配置
前端·flutter
Jedi Hongbin2 小时前
echarts自定义图表--仪表盘
前端·javascript·echarts
凯哥19702 小时前
Sciter.js指南 - 桌面GUI开发时使用第三方模块
前端
边洛洛2 小时前
对Electron打包的exe文件进行反解析
前端·javascript·electron
财神爷亲闺女2 小时前
js 实现pc端鼠标横向拖动滚动
前端
用户2031196600962 小时前
sheet在SwiftUI中的基本用法
前端