Vercel vs. Netlify: Jamstack Deployment & Hosting Solutions Comparison
The serverless ecosystem has been expanding for almost ten years now, from solutions like AWS to Azure and Google Cloud to name the behemoths.
Like with anything in tech, smaller players entered the battlefield by shaving off verticals from the market and spinning off open-source alternatives. One of these verticals, which also happened to be gigantic with hindsight, is the deployment pipeline for static websites.
There are plenty of players, and the lines are blurry. Deciding which platform you’ll choose can be hard, but each solution has its own set of strengths and weaknesses.
For this post, we’ll only put two platforms in the spotlight: Vercel vs. Netlify.
Here’s what I’ll cover:
The purpose of this article is not to determine which solution is the best (both are great) but to help you determine which platform is best for your project.
Quick Introduction
Vercel
Vercel was founded in 2016 under the name Zeit. Their mission was: "empowering solo developers to effortlessly deploy their apps."
When rebranding to Vercel, they've updated their mission "to provide the ultimate workflow for developing, previewing, and shipping Jamstack sites." They've identified three fulfillment areas for this goal; Develop, Preview & Ship. They've built, conjointly with Google and Facebook, Next.js to answer the Build part. It's a multi-purpose react framework to build production-grade apps.
As for the Preview & Ship parts, they've constructed the "Vercel Platform" and "Edge Network" to satisfy their promise. This post will mostly be about these last two concerns.
Netlify
Netlify was founded in 2014; Snipcart was pretty close with them early since there weren't many Jamstack players back then. BitBaloon, the predecessor of "Netlify Drop" was their first product. It was a drag-and-drop deployment service for your static website.
Since then, they've grown A LOT and are now offering a much broader set of tools, still specifically for the Jstack development life cycle. They've made "Netlify CMS," an open-source CMS directly integrated into your Git workflow. Although, what we will mainly talk about in this post is their major products: their serverless functions, “Netlify Functions,” their edge computing platform, "Netlify Edge," and their deployment services, “Nelify Workflow”.
What is a deployment pipeline?
Before we jump into the nitty-gritty, let's first talk about what is a deployment pipeline. If you are familiar with the Jamstack—don't sweat it, if not, we have tons of resources to learn on our blog—the deployment pipeline takes your code and transforms it into a SPA (single page application) or a static website. It takes the markup and transforms it into the final HTML your users will consume.
Besides creating the static assets, you could also decide to build and host APIs for custom logic. Platforms usually offer much more than just these two functionalities, but it’s often their core products.
For these functionalities, the provider (Netlify, Vercel, Heroku, etc.) already has two tasks it needs to handle:
Building
Exposing
The build process of your chosen static site generator runs and then saves the result on the provider infrastructure. You can also run custom build logics during this step (but that’s something a little more advanced that we won't cover here). !<--- find resources --->
In the case of a static website, the result we have is a bunch of native static web files; HTML, CSS, images, and so on. In the case of an API running custom logic, the result would be called serverless functions.
Once we have these files, we want to expose them for our users to utilize. You could easily use a CDN (Content Delivery Network) to do the job for static files. For APIs, on the other hand, it's a little more tricky since you need an environment to execute logic; you'll need what is called edge computing. Netlify edge computing network is called "Netlify Edge," and Vercel's is called "Edge Network." You can think of these networks as generalized CDNs; you can still serve assets, but you also get to run small application components. Even so, they’re faster and closer to your users than traditional cloud computing.
So, if we quickly recap before we dive into the comparison between both services, serverless ecosystems usually offer a two-fold process. The building part compiles your project into assets that your browser can render into web pages. Then, the exposing part handles the routing between these assets and the browser requests. The services abstract the server-side part of your app, so you don't need to learn DevOps nor server management.
Before we start comparing both solutions offered features, let’s get pricing out of the way.
The purpose of this article is not to compare data-centric elements like this. Vercel and Netifly both have a well-detailed page for this. One key aspect that might be worth mentioning is that, while the two services offer a free tier, Vercel doesn’t allow for commercial use on this plan. So if you plan on doing e-commerce with a free plan, Netlify is a more suitable choice.
With that out of the way, let’s start exploring the key features they offer.
Features
Workflow
We've talked about the conceptual model of operation of these services, but we have not yet checked how they really work. Let's start with how we trigger a deployment.
Both Netlify & Vercel use Git to fetch your project and retrieve your source files. They also support the same providers: GitHub, GitLab, and Bitbucket.
They both work roughly the same way; you authenticate yourself to a provider and select the repo you wish to connect with. Once it's done, both services' default configuration automatically runs the whole deployment pipeline on every commit of the main branch.
The great thing about this is that it automatically creates atomic deployments for you. Each commit provides a snapshot of your app in time. If something breaks at some point, you can roll back to a working commit and consult the deploy history to find where you introduced the bug.
Both services also let you create deploy for branches other than main; this allows you to create different environments to accommodate your development lifecycle. For example, you could create a staging deploys for your staging branch to test upcoming functionalities that are not yet stable.
Another Git-related feature is the monorepo. It's a little bit more advanced but handy if you ever need it. Let's say you have different build processes for different parts of your app; for this sake, we’ll imagine your blog and marketing sites use different tech stacks.
For some reason, you might still want them to live in the same git repository. Both Vercel and Netlify provide you a neat way of specifying different deploy pipelines for each part. To do so, you'll need to create a separate project for each subdirectory that contains the part you want to isolate and specify your build command accordingly.
As you can see, Netlify and Vercel workflow are really similar.
Serverless functions
As mentioned earlier, serverless functions let you deploy logic to endpoints on the Edge Network; you won't have to handle any scaling, security, or monitoring concerns. Effectively, serverless functions are HTTP API endpoints.
The default configuration for Netlify is to automatically deploy the functions in the netlify/functions/ folder inside your site's base directory. Same for Vercel, but it uses the function in the api folder inside your base directory.
For both Vercel and Netlify, serverless functions are powered by AWS Lambda under the hood. Don't worry; they abstract everything about it, and you won't need an AWS account. Since it has to run server-side logic, you'll have to use a programming language to write the code. Netlify supports JavaScript, TypeScript & Go, while Vercel pushes it further by also supporting Python and Ruby.
Vercel serverless functions are synchronous by nature; once the endpoint returns a response, the server stops any processing related to that request. This means you can't run any background tasks or any asynchronous jobs that take a long time. Anything over 10 seconds will timeout on the free plan and anything over 60 seconds on the Pro plan.
On the other hand, Netlify provides an option for these use cases with "Background Functions," but you'll need to be on the Pro plan (19$/month). They allow you to deploy serverless functions that run between 10 seconds and 15 minutes. This way, you can run asynchronous heavy jobs such as batch processing, scraping, and the likes. You can define a background function simply by adding -background at the end of your function filename. For example,
netlify/functions/hello.js # Would deploy a standard serverless function
netlify/functions/hello-background.js # Would deploy a background functionIn any case, they need requests to trigger; they are not the same as CRON jobs, which are not supported by both services.
One nifty feature that Vercel has that Netlify doesn't is Edge Caching for serverless functions. It's available in all their plans and activates by adding a simple Cache-Control header to your requests. Many conditions must apply for resources to be cached (you can read more about this here), but if the content requested is cached, the server will answer immediately from memory.
It means the actual function won't run to compute the result; the Edge Network remembers it from a previous request and serves it instantly. Enabling caching can reduce response time dramatically for commonly requested resources that are not user-specific.
So, if you want to use background functions, you'll have to go with Netlify since Vercel doesn't support this use case.
In the case standard serverless functions are what you need, both services will suit you. However, if you need to cache for them, Vercel is a heavy winner.
For example, let's say you were building a SPA using serverless functions to fetch the current price of a cryptocurrency. Well, caching results for given periods will dramatically improve your response time. Without caching, your serverless functions would have to poke a third-party API on every request. If 80% of your users are only using it to load the price graph of the last 24 hours, caching this will make user requests instantaneous 80% of the time; this can't be glossed over.
That being said, Netlify is also developing their answer to this problem with a new product called “Edge Handlers,” it’s in early access, and I couldn’t find thorough documentation about it.
Although, their marketing site is pretty explicit: “The Edge Handlers API can fetch, cache, and manipulate content at the edge so that you can deliver a fast, personalized experience with minimal development work.” I can’t wait to see how it’s going to compare with Vercel’s offering.
Add-ons
Besides the deployment pipeline, the two services also offer what I would call add-ons. These are convenient standard utilities that might be a little tricky to develop if you are a junior. You can usually integrate third parties APIs to do these jobs, but it comes in handy when they are native to your deployment pipeline.
If you need these, Netlify hits it out of the park. Authentication, A/B testing, forms handling & analytics are all things the solution offer out-of-the-box, while Vercel, on the other hand, only provides analytics.
To give you a good grasp of when it could be relevant for your projects, we'll cover each add-on both solutions offer.
Authentication
Netlify Identity handles the authentication process for users on your site or app. It's handy for gated content or site administration. And best of all, your users don't need a Netlify account or other services to use the identity provider.
This service is easy to use and enable; you'll first need to make sure you are running on HTTPS if you are using a custom domain. Then, open your app in Netlify's dashboard, click on the Identity panel, and Enable Identity to finish. The last thing you need to do is add the Identity widget to your website, and you're good to go!
By default, any of your users will be able to create an account and get registered. You can switch to an invite-only mode in Netlify's dashboard if it suits your use case better. The full functionality is built on top of gotrue, an open-source "API service for handling user registration and authentication for Jamstack projects." It's also made by Netlify and based on Oauth2 & JWT.
It's pretty modular and, this means you can customize a lot of the registration pipeline, from forms to invitations and emails. You can even add your own external authentication provider if you need it & build a branded external Oauth integration if you're on a paid plan.
We won't cover advanced features; if you want to see what all Identity has to offer, you can check their documentation.
A/B testing
One of my favorite Netlify add-ons is the "Split testing" one. It lets you create A/B testing campaigns by splitting your site/app traffic between different deploy branches.
For example (if you need a quick A/B testing 101 crash course 😉), you could deploy two branches, each with different copywriting, to test which one converts best. The traffic is diverted according to the proportions you specify in the dashboard. In our example, we could do a 50/50 split or a 25/75 one; it's our choice. But you can only run one A/B test at a time.
Cookies are used to ensure returning users are always served the same version to keep things consistent. Since it all lives in the front-end, you also have access to that version, so you can use it to send to Google Analytics or Segment to gather all of your analysis and find which performs best.
Forms
Forms handling is straightforward to use; you add data-netlify="true" to a standard form HTML node. It will be parsed by Netlify on deploy and linked to their endpoint with the proper form name for tracking. You can even upload files in the form, there's no size limit, but file uploads will time out after 30 seconds. Forms submissions will be available in the Forms panel of the dashboard. Finally, you can export submissions as CSV; Netlify will map files to links hosted on their side.
Analytics
The last add-on we will cover is Analytics. It's the only add-on without a free tier; 9$ for Netlify's and 10$ for Vercel's. Even though they both offer an analytic add-on, the metrics they track and the methods used are completely different.
Netlify's analytics are purely server-side; no script is needed to enable them. They'll provide you with pageviews, unique visitors, bandwidth used, top sources & pages, and resources not found. Since they already control your back-end infrastructure, there's no overhead to keeping track of these metrics. You won't experience any performance loss.
Because it's all done server-side, nothing is mapped to the user, which doesn’t bring privacy concern. It's GDPR (General Data Protection Regulation) compliant out of the box. It's also resistant to ad blockers and disabled JavaScript issues that front-end trackers might suffer from.
On the other side, Vercel tracks Web Vitals metrics from the front-end. It tracks the loading speed, responsiveness & visual stability of your application, similar to the kind of analytics you get when running a lighthouse report. You can get more details about the actual metrics here. All the data is anonymized, so privacy is ensured. Since it's running on the front-end, it has to be injected by Vercel during the deploy pipeline. This injection depends on the framework you are using. Vercel currently only supports Next.js (v10+), Nuxt.js (v2+), and Gatsby (v2+).
All in all, if you're building something that needs these functionalities, it will be much faster going with Netlify. You could still achieve the same result with Vercel by using third parties such as Auth0 for authentication, Google Analytics for A/B testing, and Typeform for forms, to name a few.
Although, the integration will take time and might be a hassle to keep track of all your services when Netlify could centralize them. If I were building a large project with many add-ons and had time and budget, I would thoroughly consider Vercel and third-party providers. For an MVP with the same add-ons need, I am heavily skewed towards Netlify.
CLI
The last thing I would like to mention without digging into the details is CLI. Both services have CLIs to do much of the work you can do in their dashboard directly in your terminal. This way, you don't have to change tools to create a project, configure it and deploy it. Switching tools implies a cognitive context switch that usually kills productivity, so it can be quite a game-changer to have a proper CLI integration for power users.
Both CLIs seem to have similar functionalities, but the value resides in the Developer Experience (DX) like most dev tools. Trying to assess the DX of a tool takes a lot of time (and can change depending on your own preferences); I didn't think I could objectively do it for a blog post. Still, I asked around to find out people who used them both to get a pulse on the question, and there seems to be a kind of cultish aura around Vercel's CLI, an overwhelming positive DX.
I can't comment on that since I haven't experienced it firsthand, but I thought this was worth noting. From what I get, Vercel's CLI shines brightest when used conjointly with Next.js, which Vercel also develops. There's a well-thought deep integration between the two which streamlines many operations that would otherwise be a little more bloaty.
Closing Thoughts
It's always hard to compare tools while remaining objective. I've used Netlify more than Vercel, and I tried to have this bias in mind while doing my research. My goal was not to provide a spreadsheet type of comparison but rather a bird's-eye view of what these tools offer.
To refresh the points made earlier, if I were doing a small to medium project and would need any add-ons offered by Netlify, I would save myself some time and go with them. If I'm building my project with Next.js, Vercel's the way to go. If I want to be a CLI power user, Vercel probably got me cover on this one too. Need caching on serverless functions; you'll need Vercel, but as mentioned, they're in early access for Netlify.
If you're not in any of these specific situations, one or the other will do the job; you might as well try both and make ahead for yourself.
I am well aware we have not discussed the following topics that could be highly relevant for you; performance, pricing & security. It fits more a data-centric spreadsheet analysis. I thought it was more valuable to link you to an excellent comparison from the folks at Bejamas (a wonderful Jamstack development agency).
I hope you found this helpful, and don't hesitate to reach out in the comment if you have any questions!
Liked this article? Please share it on Twitter.
