Which Is Better: Vercel or Cloudflare (Pages + Workers) For Jamstack Deployment?

Have you ever wondered which is the best hosting solution for your Jamstack deployment? Let’s look at two options — Vercel and Cloudflare — and see how they hold up against each other.

An Ideal Hosting Provider For Jamstack 🧐

Finding the ideal hosting provider for your Jamstack website build can be tricky, considering you have to take many factors into account. From bandwidth allocation to scalability to server speed, a provider must tick many boxes to be deemed ideal for deploying a website built with Jamstack architecture.

Businesses today are always looking for ways to improve their online presence and maximise efficiency. When it comes to Jamstack deployment, there are two popular options: Vercel or Cloudflare (Pages + Workers). But which one is the best option for your business? 

In this blog post, we’ll compare Vercel and Cloudflare (Pages + Workers) so that you can make an informed decision about which platform is right for you. Stay tuned!

Introduction to Jamstack ✨

Before we go any further, let’s first understand what the Jamstack framework actually is. Jamstack is a modern website development approach that helps developers create top-notch websites or applications for improved results.

The Jamstack architecture is based on the three components that make up the “JAM” in its name — client-side JavaScript, reusable APIs, and Markups pre-rendered at build time. Instead of using traditional content management systems (CMSes) or website builders, Jamstack brings its three core components together to provide a holistic website development solution that is more robust and powerful than other conventional approaches.

With that said, the main idea behind using Jamstack is shifting the workload from servers to clients! This is where things get interesting. In a Jamstack development environment, the codebase is handled in a decoupled state, i.e., disconnected from the front-end (appearance) of the website. As a result, much of the load is pushed to the clients’ side from the servers leading to better performance.

Now, let’s go over the three components of Jamstack in a little more detail to see what they contribute to this development approach in their separate ways.

The “J” of Jamstack can be any form of JavaScript, from pure JavaScript to even front-end languages such as React.js. But the role that it plays in Jamstack is that it handles responses and requests from your front-end code on the client side. This, in turn, allows you to build fast, scalable applications with excellent performance and user experience to match.

Next up is the “A” of Jamstack, API, or an application programming interface. APIs are a set of rules that allow the software to communicate with one another. You can integrate other applications with your website through APIs to provide uniquely enriching digital experiences for your customers.

Lastly, the “M” in Jamstack refers to the HTML Markup, which is pre-rendered. This essentially means that the code is prebuilt and ready for consumption, but it’s up to JavaScript (or other APIs) if they want to access it or not. This is different from the traditional style of front-end coding, which is still commonly used in many web applications.

The core components of Jamstack turn it into a formidable web development technology. To summarise, by implementing Jamstack architecture, you can expect benefits such as pre-rendering of pages, supercharging with JavaScript, seamless integration with other platforms, fast and secure performance, and smooth scalability.

That was just a short introduction to Jamstack, but if you would like to learn more but are short on time, check out this quick overview.

Now, before we get into the nitty-gritty of the main topic of this blog, let’s dissect the two deployment platforms in question, starting with Vercel.

What Is Vercel? 📝

Vercel, formerly known as ZEIT, is a cloud platform that enables developers to host websites and web applications to deploy instantly and scale automatically without much supervision. 

Vercel was founded in 2016 under the name ZEIT. Its mission was: “empower solo developers to effortlessly deploy their apps.”

Fast forward six years and Vercel has become one of the most accessible platforms for deploying websites. They also own the front-end technology Next.js, which explains why the framework works so seamlessly with Vercel.

Interestingly, we recently re-launched our website, this time on Next.js and saying that our performance has improved would be a massive understatement. Check out this article to catch the complete case study.

Vercel makes it very easy to deploy websites and applications. All you have to do is connect your GitHub repository to Vercel, and then you can deploy the main branch to Vercel domains.

Not just that, but through Vercel, you can also quickly deploy your site to a global CDN instantly with a single click. The platform will also ensure your site is always online by intelligently monitoring and automatically scaling front-end capacity. And it even takes care of SSL certificates or HTTPS on your behalf.

To learn more about Vercel and why we think it is one of the best platforms for front-end developers, head over to this article from our learning centre.

What About Cloudflare Pages? 📜

On the other side of this argument, we have Cloudflare Pages. Cloudflare Pages is a static web hosting platform for collaborating, building and deploying Jamstack websites using frameworks like Gatsby, Jekyll, and several others.

Like with Vercel, the platform does most of the work for you. You provide access to your repository and make some configuration changes, and automatically Cloudflare Pages will set up a domain with HTTPS for you.

The platform is entirely developer-focused and offers seamless integration with Github, unlimited seats for collaboration, and enhanced functionality with the integration through Cloudflare Workers. 

This combination of the Pages and Workers forms an incredible duo capable of handling even the most complex web developmental requirements. The addition of Cloudflare Workers with Pages allows you to write or edit your functions with the Cloudflare dashboard. 

In essence, by using Cloudflare Pages and Workers, you can build highly fast, secure, and scalable full-stack applications.

Vercel vs Cloudflare: How Do They Compare? 💭

Without any further ado, let’s go over the big question, Vercel or Cloudflare? Which is the superior platform for Jamstack deployment? 

In the upcoming sections of this post, we have explained the advantages and disadvantages of both platforms and summarised our findings to provide you with a take-home message that you can apply moving forward.

Advantages of Cloudflare (Pages + Workers) 🦸‍♀️

Economically Viable 💰

With Cloudflare (Pages + Workers), a significant advantage comes in the shape of affordability. Cloudflare offers free and paid versions for both Cloudflare Pages and Workers, making it a versatile solution to fit almost every situation. For instance, with Cloudflare Workers, you get 100k free requests every day and only $0.15 for every other 10k requests. 

Zero Cold Starts 🥶

Despite the backend being serverless, Cloudflare is less prone to cold starts. Most serverless offerings are notorious for being susceptible to “cold starts,” which causes a lag in response times due to the static/cold functions. However, Cloudflare Workers always had very few problems with cold starts because their start times were already low at 5ms. Still, they have reduced that even further to 0 ms after implementing their Transport Layer Security (TLS) Handshake optimisations.

Privacy-Driven Analytics 🔒

Cloudflare also offers a privacy-focused, lightweight and accurate analytics tool capable of rivalling Google analytics. This represents an excellent option for folks wanting to have their analytics software adjoined with their hosting. Furthermore, Cloudflare’s web analytics tool, being privacy-driven, allows you to retrieve essential metrics on your website usage without sacrificing your visitor’s privacy.

Safe, Secure, and Quick 🔐

Cloudflare has direct integration with Cloudflare’s security infrastructure to safeguard your website from denial of service attacks, customer data breaches, and hack bots.

Cloudflare also offers more PoPs (Point of Presence), HTTP/3, Brotli and other such technologies to improve loading times and reduce latency.

Disadvantages of Cloudflare( Pages + Workers) 🙅‍♀️

Great for Static But… 🤔

Perhaps the most significant disadvantage of using Cloudflare is that it cannot support dynamic websites. This is because non-static features need a Node.js server or dynamic logic, which cannot be computed during the build process and thus is not supported by Cloudflare. These features include server-side rendering(SSR), image optimisation, internationalised routing, API routing, etc.

It doesn’t Work with Next.js. ⛔

Another disadvantage is that Cloudflare does not fully support Next.js, which uses Node. In a positive light, there’s work being done for Next.js to support the web framework which Cloudflare uses, but unless you have a static site, there’s a good chance you’ll face issues transferring until that’s implemented.

Analytics Can Improve 💹

Finally, we need to speak of Cloudflare’s web analytics tool again. While it is an excellent tool in its own right, it has shown to be inaccurate compared to other analytics tools such as Google Analytics.

Advantages Of Vercel 🦸‍♂️

Perfect For Next.js 👌

Vercel and Next.js are like peas in a pod; they fit together perfectly. All the Next.js features are covered in Vercel, which you can deploy without having to configure anything.

Server-Side Rendering 💻

Unlike Cloudflare, Vercel’s most significant advantage lies in that it allows server-side rendering, making it the obvious choice for features requiring dynamic logic.

Seamless Dev and Prod Setup 💡

Vercel makes development and production environments extremely easy to set up for testing and launch, respectively.

Excellent For Re-building 🔥

Vercel can also handle build-cache preserving. This means it copies the cache from the previous build before starting a new one. Essentially, building a website from scratch may take longer on Vercel on the first attempt but will always be faster in the following builds.

Notification Settings 📲

Finally, Vercel provides notifications via Slack, GitHub, and outgoing webhooks for events triggered on successful, cancelled, or failed builds. This is something that Cloudflare fails to deliver.

Disadvantages of Vercel 🙅‍♂️

Paid Analytics 💸

Vercel’s analytics system collects real-time user metrics and presents the information clearly and succinctly. Furthermore, the tool supports Next.js, Gatsby and Nuxt.js projects. But the issue is, unlike Cloudflare’s web analytics tool, Vercel’s analytics offering requires a Vercel Pro plan.

Expensive Bandwidth 🤑

Vercel’s bandwidth limit of 100 GB/month fails miserably compared to Cloudflare Pages which has no such limitations allowing unlimited data to transfer to and from the CDN. 

Paid Password Protection 🔑

Vercel charges AUD $210/month, at the time of writing, separately for password protection, something that Cloudflare provides within their paid plan. This functionality offers an easy way to restrict access to the website for users who don’t have passwords. This feature can be helpful if you are working on a new site and want to keep it secret. But the high price point can be a real bummer in this case.

Conclusion 🤗

So, which is the best Jamstack hosting for you? That depends on your specific needs and project requirements. If you want to use Next.js or React on your project, Vercel is an excellent option. Alternatively, Cloudflare Pages with Workers offers many flexibility and choices for static website projects.

No matter what route you choose, we’re here to help get your Jamstack project off the ground. Book a discovery chat today, and our team of experts will help you pick the best deployment platform specifically for your business.