Deploying applications on serverless platforms like Vercel offers a lot of benefits, including automated deployments, scaling and much more.
However, one common challenge is dealing with cold starts, where the first request after a period of inactivity can experience significant delays. In this guide, we'll explore how to mitigate cold starts when deploying a Next.js app with Payload CMS on Vercel, ensuring a smoother and more responsive user experience.
What Are Cold Starts?
Cold starts occur in serverless environments when the infrastructure needs to spin up a new instance to handle an incoming request. This process includes initializing the server, loading the application, and establishing any necessary connections. While subsequent requests are almost instant, the initial request to Payload takes 3-10 seconds, which is not a good user experience.
Traditional vs. Serverless Architecture
- Traditional Architecture: In a traditional client-server setup, the server is always running, ready to handle requests immediately. This setup ensures fast response times but requires continuous resource allocation and management.
- Serverless Architecture: In a serverless setup, the infrastructure scales automatically. When a request is received, a small instance is spun up to handle it. This instance lives for a short period (e.g., 10 minutes) and is terminated if no further requests are received. This approach reduces resource usage but introduces cold starts.
Why Use Vercel for Deployment?
Vercel simplifies deploying Next.js applications by integrating seamlessly with your Git repository. It offers a global content delivery network (CDN), easy environment configuration, and a great developer experience. Since Payload has become a native Next.js app in Version 3, Vercel is the first choice for deployment.
Mitigating Cold Starts with Cron Jobs
To address cold starts, we can use a cron job to periodically ping our application, ensuring that it remains active and responsive. Vercel provides built-in support for cron jobs, making this process straightforward.
Create an API Route for Keep-Alive Requests
In your Next.js project, create a new API route that Vercel can call periodically to keep the serverless function warm.
// File: /app/keep-alive/route.js
export const revalidate = 0;
export default async function handler(req, res) {
await fetch(`https://${process.env.VERCEL_URL}/admin`);
res.status(200).json({ ok: true });
}Configure Vercel JSON for Cron Job
Define a cron job in the vercel.json configuration file to call the keep-alive route every five minutes.
{
"crons": [
{
"path": "/keep-alive",
"schedule": "*/5 * * * *"
}
]
}This schedule ensures that the keep-alive function is called every five minutes.
Deploy Your Application
Commit your changes and deploy the application to Vercel.
Verify the Cron Job
After deploying, verify that the cron job is running correctly in the Vercel dashboard under the "Cron Jobs" section. You should see logs indicating that the keep-alive function is being called as scheduled.
Optimize Function Settings
For improved performance, configure your serverless function region and resources:
Set Function Region: Go to your project settings in Vercel and set the function region to your desired location (e.g., Germany).
Adjust Function Resources: Increase the memory and CPU allocation for your serverless functions to ensure they handle requests more efficiently.
Optimize Code and Dependencies
Ensure your code and dependencies are optimized for faster startup times.
Downsides
Executing a serverless function every couple minutes will use up included resources in your Vercel plan. While it won't make a relevant difference in 99% of cases, you can further optimize the cronjob to only keep the serverless functions warm during working hours (e.g. 9AM - 5AM in your local timezone)
For further optimizations and detailed guides, refer to Vercel's official documentation and resources.
