Next.js 流式渲染中“连接已关闭”错误的诊断与解决方案

深入理解 Next.js 流式渲染与连接中断

next.js 13.4 引入的 app router 结合 react suspense 和流式渲染，旨在提升用户体验，允许页面内容逐步加载。当使用 async server components 获取数据时，next.js 会在服务器端执行这些数据获取逻辑。如果数据获取过程耗时较长，suspense 边界内的内容会显示 fallback，直到数据准备就绪。然而，在部署到 vercel 等无服务器平台时，这些服务器端的数据获取操作实际上是在无服务器函数（serverless functions）中执行的。

当您在 Next.js 应用中，尤其是在 Server Components 内部，通过 fetch 或其他方式请求外部 API 时，这些请求会阻塞无服务器函数的执行，直到数据返回。如果外部 API 响应缓慢，或者需要加载多个耗时的数据源（如本例中尝试加载超过两个数据），无服务器函数可能会长时间处于等待状态。此时，如果函数执行时间超过了平台的默认限制，平台会强制终止该函数，导致客户端收到“连接已关闭”（connection closed）的错误。

Vercel 函数超时机制解析

Vercel 作为领先的无服务器部署平台，对部署在其上的无服务器函数（包括 Next.js 的 API 路由、getServerSideProps 或 App Router 中的 Server Components 数据获取）设定了默认的执行时间限制。根据 Vercel 的官方文档，免费计划的默认函数执行时间限制通常为 10 秒。如果函数在此时间内未能完成执行并返回响应，Vercel 会终止该函数，并向客户端发送一个连接中断的信号。

对于 Next.js 13.5 及更高版本，以及 SvelteKit、Astro、Nuxt 和 Remix 等框架，Vercel 提供了更精细的超时配置选项。这意味着，当您的 Server Components 或 API 路由在 Vercel 上运行时，如果其内部的任何异步操作（如调用第三方 API、数据库查询等）耗时超过了默认的 10 秒，就会触发此超时错误。

诊断“连接已关闭”错误：常见原因

在 Next.js 流式渲染场景下遇到“连接已关闭”错误，尤其是在本地开发环境正常而部署到 Vercel 后出现时，通常指向以下几个核心原因：

1. 外部 API 响应缓慢： 这是最常见的原因。您的 Next.js 应用在服务器端调用了第三方 API 或数据库查询，而这些外部服务的响应时间过长，超出了 Vercel 函数的执行限制。
2. 复杂的数据处理逻辑： 服务器端的数据处理、转换或聚合操作过于复杂，导致函数执行时间过长。
3. 并发请求管理不当： 尽管流式渲染旨在并行处理，但如果多个数据请求都耗时巨大，并且它们的总等待时间超出了单个无服务器函数的限制，同样会触发超时。

本例中，用户尝试加载多个数据源，且部署在 Vercel 上出现错误，而本地正常，这强烈暗示了 Vercel 的超时限制是问题的关键。

解决方案：调整 Vercel 函数持续时间

解决 Next.js 流式渲染中因超时导致的“连接已关闭”错误的最直接方法是增加 Vercel 无服务器函数的最大持续时间（maxDuration）。

您可以通过在 next.config.js 文件中为特定的路由或所有路由配置 maxDuration，或者在 vercel.json 文件中进行全局或局部配置。

方法一：在 next.config.js 中配置 (Next.js 13.5+ 推荐)

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

对于 Next.js 13.5 及更高版本，您可以在 next.config.js 中直接为 App Router 的路由段（Route Segment）或整个应用设置 maxDuration。例如，如果您有一个 app/api/articles/route.ts 或一个 Server Component 所在的路由，可以通过以下方式配置：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 启用 App Router (如果尚未启用)
    appDir: true,
  },
  // 配置无服务器函数的默认最大持续时间 (秒)
  // 这会影响所有 App Router 的 Server Components 和 API 路由
  // 注意：此配置可能需要 Next.js 版本支持
  // 如果您的 Next.js 版本不支持，请考虑使用 vercel.json
  // maxDuration: 60, // 示例：将超时设置为 60 秒
};

module.exports = nextConfig;

更精确地，对于特定的路由段，您可以在该路由段的文件中导出 dynamic 和 maxDuration：

// app/your-route-segment/page.tsx 或 app/api/your-endpoint/route.ts
export const dynamic = 'force-dynamic'; // 确保每次请求都重新渲染
export const maxDuration = 60; // 将此路由的最大持续时间设置为 60 秒

// ... 您的 Server Component 或 API 路由逻辑

方法二：在 vercel.json 中配置 (适用于所有 Next.js 版本)

您可以在项目的根目录下创建或修改 vercel.json 文件，以配置 Vercel 部署的全局或特定函数的超时时间。

// vercel.json
{
  "functions": {
    "api/**/*.js": {
      "maxDuration": 60
    },
    "app/**/*.js": {
      "maxDuration": 60
    }
  }
}

在上述配置中：

• "api/**/*.js" 会匹配所有 api 目录下的 API 路由。
• "app/**/*.js" 会匹配所有 app 目录下，由 App Router 生成的无服务器函数（包括 Server Components 的数据获取）。
• "maxDuration": 60 将这些函数的最大持续时间设置为 60 秒。您可以根据实际需求调整此值。

重要提示：

• Vercel 的不同计划对 maxDuration 有不同的上限。免费计划通常限制在 60 秒，付费计划可能允许更长的持续时间。请查阅 Vercel 官方文档以获取最新和最准确的限制信息。
• 修改配置后，请确保重新部署您的应用到 Vercel。

注意事项与最佳实践

1. 性能监控： 增加超时时间只是一个临时解决方案。根本问题在于外部 API 响应缓慢。强烈建议使用 Vercel 的日志和监控工具，或集成第三方 APM（应用性能管理）工具，来识别和分析哪些外部 API 调用是性能瓶颈。
2. API 优化： 尽可能优化您的外部 API。这可能包括：
   • 优化数据库查询。
   • 为 API 响应添加缓存。
   • 减少 API 返回的数据量。
   • 考虑使用 CDN。
3. 合理设置超时： 不要盲目地将 maxDuration 设置为非常大的值。过长的超时时间可能导致用户长时间等待，影响用户体验，并可能增加 Vercel 的计费成本。应根据实际需求和性能分析，设置一个合理且尽可能短的超时时间。
4. 本地与生产环境差异： 记住本地开发环境通常没有 Vercel 的无服务器函数限制，也不会有网络延迟到外部 API 的真实表现。因此，在本地测试通过的功能，在生产环境可能会因为这些限制而失败。始终在接近生产环境的条件下进行测试。
5. 错误处理： 即使增加了超时时间，也应在代码中实现健壮的错误处理机制，例如使用 try...catch 块捕获 fetch 错误，并向用户提供友好的错误提示或回退内容。

总结

当 Next.js 13.4+ 应用在 Vercel 上使用流式渲染和 React Suspense 时遇到“连接已关闭”错误，尤其是在加载多个数据源时，这通常是由于 Vercel 无服务器函数的默认执行时间限制（如 10 秒）被耗时过长的外部 API 调用所超出。通过在 next.config.js 或 vercel.json 中配置 maxDuration，可以有效延长函数的执行时间，从而解决此问题。然而，这只是治标之策，长远来看，优化外部 API 性能和实施有效的性能监控才是根本之道。

以上就是Next.js 流式渲染中“连接已关闭”错误的诊断与解决方案的详细内容，更多请关注php中文网其它相关文章！