尝试在 Next.js 13 中加载动态路由时出现“此无服务器函数已超时”

Question

我有一个简单的 Next.js 应用程序，其路由结构如下：

• /contentA/

  - 静态 - 首次加载：103 kB

• /contentA/[paramA]/groups

  - SSG - 首次加载：120 kB

• /contentB/[paramA]/[paramB]/[paramC]

  - SSR（返回客户端组件） - 首次加载：103 kB

我根据爱好计划将该应用程序部署到 Vercel。当我直接访问路由

/contentB/[paramA]/[paramB]/[paramC]

或尝试刷新页面时，我会收到“This Serverless Function has timed out”错误，因为相应的serverless函数超出了默认的10秒限制。它不会每次都发生，但仍然相当一致地发生。

我尝试通过使用动态导入来减少 JS 文件大小来优化首次加载时间，虽然我已经设法减少了大约 50%，但似乎仍然没有帮助。

访问路由时执行了一个 fetch 请求，但它不可能是瓶颈。它几乎立即返回响应。

但是，当我尝试使用 Next.js 导航的链接访问该页面时，即

/contentA/

->

/contentA/[paramA]/groups

->

/contentB/[paramA]/[paramB]/[paramC]

，该页面的加载时间非常快，整体体验非常快。

有人可以帮助我理解为什么在重新加载页面或第一次访问该页面时该路线的加载时间要花这么多时间吗？有什么办法可以改进或者让它更稳定吗？

我正在使用 Next.js 13.5.5。

Answer 1

这听起来像 Vercel 的 Serverless 的冷启动，可能会延迟每次调用的第一次运行。这是一段时间未使用后重新启动应用程序所需的时间，为 Vercel 这边节省了一些成本。

以下是 Vercel 提供的一些降低冷启动性能的官方指南： https://vercel.com/guides/how-can-i-improve-serverless-function-lambda-cold-start-performance-on-vercel

另外，在AWS的以下博客文章中，您可以找到AWS Lambda的一些架构设计以及为什么会发生冷启动： https://aws.amazon.com/blogs/compute/operating-lambda-performance-optimization-part-1/

Answer 2

经过几个小时和尝试，我找到了解决方案。

问题是Vercel，在免费计划中，基本上不允许使用getServerSideProps，抛出这个错误。

您需要切换到 PRO 计划（或使用其他托管提供商，而不是 Vercel）。

此外，仅仅将 Vercel 切换到 PRO 计划是不够的；您还需要在项目根目录中创建一个 vercel.json 文件，指定带有 SSR 的动态页面的地址，并为其扩展内存和超时设置。

我为顶部的所有页面设置了它，为了以防万一，添加了两条更重要的路线（它们是不起作用的路线）。这有效。我希望它可以节省某人的时间，因为我自己花了很长时间寻找解决方案。

下面提供了 vercel.json 内容的示例：

{
  "framework": "nextjs",
  "functions": {
    "src/pages/**/*": {
      "memory": 3008,
      "maxDuration": 20
    },
    "src/pages/all-therapists/index.tsx": {
      "memory": 3008,
      "maxDuration": 24
    },
    "src/pages/all-therapists/[diseaseUrl].tsx": {
      "memory": 3008,
      "maxDuration": 24
    }
  }
}