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

相关推荐
风无雨25 分钟前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!26 分钟前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
安分小尧5 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员5 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪6 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya6 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81636 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef066 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪6 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin7 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫