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

相关推荐
深蓝AI9 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒10 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=010 小时前
Vue 3 模板语
前端·javascript·vue.js
用户76103044737110 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿10 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺10 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李10 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying11 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一11 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js11 小时前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化