为何Vercel（Next.js）中页面加载被视为Serverless函数？求解决方案

为什么页面加载会被当作Serverless函数？是否正常？ #

这是正常现象。你的/results页面应该使用了**服务器端渲染（SSR，比如getServerSideProps）**或者在服务器端组件中进行了数据获取，在Vercel部署时，这类页面的渲染逻辑会被打包成一个Serverless函数执行。Vercel Hobby计划对单个Serverless函数的总执行时长限制为10秒——这里的总时长包括页面渲染过程中所有的API调用、数据处理等操作的耗时总和，而不是单个API调用的时长。

你的场景里，多个后端调用如果是串行执行的，总耗时会叠加（比如2个5秒的调用串行就是10秒，刚好触达限制，再加上页面本身的渲染开销就会超时），这就导致整个页面请求被判定为Serverless函数超时，出现"Connection Closed"错误。

可行解决方案 #

1. 迁移数据获取到客户端（优先推荐，无需数据库） #

将原本在服务器端的API调用转移到客户端组件中执行：

• 给resultsFetch组件添加'use client'指令，将其标记为客户端组件
• 在组件内使用useEffect、SWR或React Query等工具发起API请求，替代服务器端的数据获取逻辑
• 页面会先完成渲染并返回客户端，随后在客户端逐个发起API调用，每个调用单独受限于Vercel的API路由10秒限制，页面本身不会因为总耗时过长超时，Suspense的加载状态也能正常展示

2. 并行化服务器端数据获取 #

如果必须在服务器端完成数据获取，把串行的API调用改为并行执行：

• 将多个后端调用用Promise.all()包裹，同时发起请求，这样总耗时等于最长的单个调用时长（约5秒），不会叠加
• 确保你的服务器端数据获取逻辑是并行而非串行，比如把原本的await fetch1(); await fetch2();改成await Promise.all([fetch1(), fetch2()])

3. 增量静态再生（ISR，适用于非实时数据场景） #

如果你的数据不需要实时更新，可以使用Next.js的ISR功能：

• 在页面中配置getStaticProps并添加revalidate参数，让Vercel在构建时生成静态页面，之后定期重新生成
• 这种方式页面请求不会触发Serverless函数执行，也就不会受10秒时长限制

4. 异步队列处理（备选，需数据库支持） #

如果上述方案都不适用，再考虑引入数据库实现异步处理：

• 将请求任务存入数据库并标记状态，服务器端函数快速返回客户端
• 客户端通过轮询或WebSocket监听任务状态，待所有任务完成后展示结果

内容的提问来源于stack exchange，提问作者Daniel Santos