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

Question

I found this quote on the Vercel website:
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
But is this also true for getServerSideProps?
I have a small project with an API and another page that loads the data with getServerSideProps. When the first API is done. I would except the next page with the getServerSideProps would be fast, but that also seems to have a cold boot.
The second time everything is fast.

Answer 1

Based on the two following comments from Vercel in related GitHub discussions:
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.
Source: 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.
Source: https://github.com/vercel/vercel/discussions/5458#discussioncomment-614662
My understanding is that in your scenario the API route (or any other API routes you may have) will be bundled into one function, and getServerSideProps into another function. If either exceeds the 50MB size limit then an additional function would be created.
What you're experiencing seems to be expected. The API route and getServerSideProps would be a different functions, thus having separate cold boots.

Answer 2

You can also use caching headers inside getServerSideProps and API Routes for dynamic responses. For example, using stale-while-revalidate.
if you use Vercel to host your frontend, with one line of code you can take advantage of the stale-while-revalidate cache strategy which has very similar behaviour to getStaticProps when using revalidate.
// 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: {},
}
}
Check the docs: https://nextjs.org/docs/going-to-production#caching
But it is important to know when to use getServerSideProps or api urls in next.js
When to use getServerSideProps
The getServerSideProps function fetches data each time a user requests the page. It will fetch the data before sending the page to the client If the client makes a subsequent request, the data will be fetched again. In these cases it is helpful to use:
SEO is important for the page
The content that is fetched is important and updates frequently
When we want to fetch data that relates to the user's cookies/activity and is consequently not possible to cache. Websites with user authentication features end up relying on getServerSideProps a lot to make sure users are properly signed in before fulfilling a request.
If the page is not SEO critical, for example, if you need to fetch the current users for the admin, you do not need to use getServerSideProps. However, if you are fetching the shopping items for your home page, it is good practice to use getServerSideProps.
When to use api functions
It is important to understand that some websites that we are building do not just need Html pages that are being served back to the users upon requests. You might for example have a feature on your website that allows users to submit feedback or signup for a newsletter. So when a user clicks on such a button to for example signup for a newsletter, think about what happens behind the scenes when we signup for newsletter.
We need to send data to some server to store that entered newsletter email addressd in some database, and that request being sent is not about fetching a site, it is about storing data. We do not want to get a Html page, Instead we want to send that user entered data to some database. that is why we use API's for. there are different types of api but the main idea is same. we have a server that exposes some certain urls. Those urls are not just sending html data, but they are about accepting some data and sending back responses with any kind of data.
So Api routes are special kind of Urls, which you can add to your next.js application, which are not about getting a standard browser request and sending back a prerendered html page, but which are about getting data, using data maybe storing data in some database and sending back data in any form of your choice.