Next.js 在 Vercel 上,服务器代码是在单个 Lambda 上吗?

Next.js on Vercel, is server code on single Lambda?

我在 Vercel 网站上找到 this 引用:

When using Next.js, Vercel optimizes Serverless Function output for server-rendered pages and API Routes. All functions will be created inside the same bundle (or in multiple chunks if greater than 50mb). This helps reduce cold starts since the bundled function is more likely warm

但这也适用于 getServerSideProps 吗?

我有一个带有 API 的小项目和另一个使用 getServerSideProps 加载数据的页面。当第一个 API 完成时。我希望带有 getServerSideProps 的下一页会很快,但那似乎也有冷启动。 第二次一切都很快。

You can also use caching headers inside getServerSideProps and API Routes for dynamic responses. For example, using stale-while-revalidate.

如果您使用 Vercel 来托管您的前端,只需一行代码,您就可以利用 stale-while-revalidate 缓存策略,该策略在使用 revalidate 时具有与 getStaticProps 非常相似的行为。

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

查看文档:https://nextjs.org/docs/going-to-production#caching

但了解何时在 next.js

中使用 getServerSideProps 或 api 网址很重要

何时使用getServerSideProps

getServerSideProps 函数在用户每次请求页面时获取数据。它会在将页面发送给客户端之前获取数据如果客户端发出后续请求,将再次获取数据。在这些情况下,使用:

会很有帮助
  • SEO 对页面很重要
  • 抓取的内容重要且更新频繁
  • 当我们想要获取与用户相关的数据时 cookies/activity 因此无法缓存。具有用户身份验证功能的网站最终非常依赖 getServerSideProps 来确保用户在满足请求之前正确登录。

如果页面不是 SEO 关键,例如,如果您需要为管理员获取当前用户,则不需要使用 getServerSideProps。但是,如果您要为主页获取购物项目,最好使用 getServerSideProps.

何时使用 api 函数

请务必了解,我们正在构建的某些网站不仅仅需要 Html 页面根据请求返回给用户。例如,您的网站可能有一项功能,允许用户提交反馈或注册时事通讯。因此,当用户单击此类按钮以注册时事通讯时,想想当我们注册时事通讯时幕后发生的事情。

我们需要将数据发送到某个服务器以存储在某个数据库中寻址的输入时事通讯电子邮件,发送的请求不是关于获取站点,而是关于存储数据。我们不想获得 Html 页面,而是希望将该用户输入的数据发送到某个数据库。这就是为什么我们使用 API 的原因。 api 有不同的类型,但主要思想是相同的。我们有一个服务器公开了一些特定的 url。这些 url 不仅仅是发送 html 数据,而且它们是关于接受一些数据并用任何类型的数据发回响应。

所以 Api 路由是一种特殊的 Urls,您可以将其添加到 next.js 应用程序中,这与获取标准浏览器请求并发回预渲染 html 无关页面,但这是关于获取数据、使用数据可能将数据存储在某些数据库中并以您选择的任何形式发回数据。

基于 Vercel 在相关 GitHub 讨论中的以下两条评论:

One thing to note — in Vercel (a recent update), Next.js SSR pages and pages/api routes get bundled into two separate Lambdas (λ), so you should not have to worry about the Serverless Function limit.

来源:https://github.com/vercel/vercel/discussions/5093#discussioncomment-57628

API Routes will all be bundled, each SSR page will also be bundled - both of these will be creating another function should they exceed maximum capacity (50MB) although this is handled a little before the limit to avoid it being too close.

来源:https://github.com/vercel/vercel/discussions/5458#discussioncomment-614662

我的理解是,在您的场景中,API 路由(或您可能拥有的任何其他 API 路由)将被捆绑到一个函数中,而 getServerSideProps 将被捆绑到另一个函数中。如果任何一个超过 50MB 大小限制,则将创建一个附加函数。

您遇到的情况似乎在意料之中。 API 路由和 getServerSideProps 是不同的函数,因此有单独的冷启动。