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

相关推荐
powerfulhell9 分钟前
寒假python作业5
java·前端·python
木子啊24 分钟前
前端组件化:模板继承拯救发际线
前端
三十_A26 分钟前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频
前端小菜袅26 分钟前
PC端原样显示移动端页面方案
开发语言·前端·javascript·postcss·px-to-viewport·移动端适配pc端
We་ct28 分钟前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
爱问问题的小李43 分钟前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js
子兮曰1 小时前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
前端·javascript·vue.js
CHU7290351 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
枫叶丹41 小时前
【Qt开发】Qt界面优化(一)-> Qt样式表(QSS) 背景介绍
开发语言·前端·qt·系统架构
子兮曰7 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github