Battle of the Jamstack platforms — Netlify, Vercel, AWS

Overview

If you follow me online you probably know that I like serverless platforms a lot. Serverless nowadays is a pretty ambiguous term and can mean anything; from SQLite coining the term to AWS enumerating their serverless offerings.

In this article, serverless corresponds to a single page application (SPA) website that is accompanied by a lightweight API. This setup exploded in popularity recently, and it even got a name, Jamstack, for JavaScript, APIs, and Markup.

I experimented with many platforms over the past few years and I am going to briefly go over my current top 3 platforms to deploy your application, Netlify, Vercel, and AWS.

TL;DR

All three platforms are great and I recommend all of them, depending on how much time you are willing to spend, and how much extensibility you think you might need in the future.

Netlify

Website: https://netlify.com

I discovered Netlify couple of years ago, and have been tracking their progress ever since. The first time I saw it, I was simply stunned by how simple and fun it was to use while at the same time having powerful features.

Netlify has a lot of features and it feels more like an ecosystem of pluggable functionality (what they call add-ons), with flexible pricing.

Most notable add-on features:

  • Serverless Functions
  • Instant-forms
  • Identity
  • Analytics

The core product of the Netlify Platform is the combination of Netlify Build and Netlify Edge. Netlify Build is the ability to easily connect your Netlify project to your code repository (Github, Gitlab, BitBucket) and deploy your changes after every commit with a unique URL for each deployment. Netlify Edge is the application delivery network (ADN) which propagates the project’s artifacts in locations across the globe, similar to a normal content delivery network (CDN) but much smarter, and faster.

The whole process to get started is so simple that you can just drag-and-drop your project folder onto their website and deploy it in seconds!

I cannot possibly enumerate all the features Netlify provides but for the sake of this article we will focus on the core platform and the Serverless Functions add-on.

Serverless functions use AWS Lambda behind the scenes, but abstract it away so that we don’t have to fiddle with API Gateway, IAM role permissions, and all the nitty gritty AWS boilerplate.

For example, if we take JavaScript as an example, simply creating a file functions/hello-world.js with the content below will create an API accessible at /.netlify/functions/hello-world.

exports.handler = function(event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
}

That’s it for Netlify, let’s move on to the next one.

Vercel

Website: https://vercel.com

Vercel was until recently known as Zeit Now, and is extremely similar to Netlify in terms of target audience. Vercel however puts a lot of emphasis on their zero config deployments, and you can see it mentioned all over their website and docs. By zero-config deployment we mean that their system is trying to be smart and guess the build system or framework that your project is using based on your files and automatically do what it needs to do without you specifying anything. It works very well most of the time, apart from a small issue I discovered with the custom build system.

Vercel provides a similar experience as Netlify, where you can connect your repository and instantly build and deploy your project after every commit, and also includes a delivery network.

A big feature is once again their Serverless Functions offering, which is also using AWS Lambda under the covers. However, Vercel is a step up from Netlify, with more languages and more regions supported.

Its delivery network is also quite powerful, and more feature-rich than Netlify’s, since apart from the static assets, it can also cache serverless function responses.

Just for completeness, a serverless function example in JavaScript requires the following content in the file api/hello.js in order to expose the API at /api/hello?name=xxx.

module.exports = (req, res) => {
  const { name = 'World' } = req.query
  res.status(200).send(`Hello ${name}!`)
}

As you can see, even though it’s based on AWS Lambda, Vercel decided to use custom function signatures for the handler in contrary to Netlify which is using AWS’s format.

Before we finish with Vercel, I would like to briefly mention Next.js, the React framework they developed which is simply amazing. I recently migrated my blog to use this and I cannot emphasize how great it is, and in conjunction with Vercel’s platform they make a killer combination 🚀

Amazon Web Services (AWS)

Even though AWS does not provide a nice coherent Jamstack platform (I don’t like AWS Amplify at all), it provides all the necessary services to build your application.

For the past 5 years I have been using this myself, and the main services we need are Amazon S3 for storage of the static assets, Amazon CloudFront as our CDN, and AWS Lambda with API Gateway for our serverless functions API.

AWS has an advantage over both Netlify and Vercel, because of Lambda@Edge which is basically a slightly restricted version of AWS Lambda running on the edge locations of Amazon CloudFront, so much closer to the customers compared to the normal Lambda functions which are in the regional datacenters. I have been using Lambda@Edge for years now, both in personal projects but also while I was working at Amazon and I love it!

As you can see, it involves more moving pieces but they are all super robust services used by thousands of customers, serving billions of requests every year without issues. Some of the AWS services themselves are being built on-top of these services, which proves their reliability and that AWS bets on them working as expected!

Finally, I would strongly recommend using AWS CDK to provision your resources for all the above services in code, referred to as Infrastructure as Code (remember CloudFormation?).

Conclusion

I only scratched the surface of each platform’s feature set, however it’s quite clear that some are better at something and worse at something else.

If you focus only on Jamstack applications, my recommendation would be to go with Vercel go with Netlify (see update below). Recommending Next.js for one more time 😃

Update 2021-02-22: I have been experiencing slow load times (~2 seconds) on Vercel for two of my projects for a few weeks, and it seems that it’s happening when the page is rarely visited (although it shouldn’t according to docs, and Vercel support). Therefore, I now recommend Netlify over Vercel as a first choice. Netlify also works with Next.js even if you do not use the export mechanism, so feature parity is good.

If you are going to find uses for Netlify’s add-ons, then it’s a great choice as well! Really, Netlify and Vercel are very similar and you cannot go wrong with either. They even published an article yesterday on how to deploy a Next.js application on Netlify.

Finally, if your application is going to need additional cloud infrastructure to support it, like control over the AWS Lambda functions, queueing systems, databases, detailed monitoring, or anything else not provided by these Jamstack oriented platforms, then AWS is your best bet. You can always make requests from Netlify/Vercel’s serverless functions to other AWS resources, but it’s a matter of control and flexibility.

That’s it for this article, maybe I will do a deep-dive in the future for certain features…


May 05, 2020