Cloudflare Pages Compared to Netlify
Recently Cloudflare introduced Cloudflare Pages, a platform that allows deploying dynamic front end applications directly from a GitHub account. The question is: can it compete with Netlify, a veteran when it comes to continuous deployment and automated build from Git?
In this article, I will walk you through Cloudflare Pages and Netlify and compare the features between those two so you can get a clear picture of each and decide which one to use in your projects.
What is Netlify and how does it work?
Netlify is a platform that offers automation for web projects and is replacing complex infrastructure, hosting, continuous integration and deployment pipelines with a single workflow. It can run your build command as soon as the project is pushed to the Git repo.
Netlify enforces a strict concept of atomic deploys. Instead of replacing and/or pushing individual files, a new deployment is always created. Netlify compares the files in a new deployment with an existing one and determines which files should be uploaded. This means that your site will always stay consistent while you’re uploading a new deployment.
Setting up a project on Netlify is a straightforward process. All you need to do is create the account on Netlify, connect your Git with Netlify, and add a new site from Git.
Locate your project/repository on your Git provider,
apply your settings related to build – set the branch to deploy, set the build command and publish directory, and et voilà – that’s it, you can deploy the site.
Netlify has a lot of features that are handy and can be used out of the box such as Forms Handling, Authentication – Netlify identity, Extensions – Plugins, Notifications (Slack, email, GitHub, outgoing webhook), instant rollback to any version, and it’s built on multi-cloud infrastructure.
It is important to say that Netlify offers 300 mins/month, one team member, HTTPS support out of the box, and 100 GB of bandwidth for free. Some functionalities such as site passwords, shared environment variables and notifications do require the paid plan, though. More about Netlify pricing and features included in the free tier can be found here.
What is the Cloudflare Pages platform and how does it work?
Cloudflare Pages is a platform to be used by the frontend developers to collaborate, host the frontend apps, and automate the build and deployment process – everything is configured through a single workflow, just as is the case for Netlify.
When deploying a new release, Cloudflare Pages creates a new instance and, only if the deployment is successful, switches production with the new release.
To configure the build and deployment process on Cloudflare Pages you’ll have to create Cloudflare and GitHub or Bit Bucket accounts. Then, connect your code repository account with the Cloudflare Pages platform and select the repository you want to build and deploy.
After selecting the repo, click the Begin setup button. That will lead you to the setting page where you need to elect the Production branch and assign Build related settings. Depending on the application framework used, you may need to adjust the Build command and Build output directory. You can also use the Framework preset option to prefill the recommended settings.
After you populate all the related settings, Save and Deploy will automatically clone the previously selected Repo, build it and deploy it to Cloudflare Datacenters across the World (200 cities in more than 100 countries). Same as for Netlify, automatic deployments are active by default and a free SSL certificate is issued automatically.
Cloudflare offers a free tier where you can add an unlimited number of collaborators for your project, 500 builds per month (1 build at a time), as well as unlimited sites, requests and bandwidth.
Cloudflare Pages doesn’t offer fancy features like Forms out-of-the-box, but it does offer Cloudflare Access app with up to 50 users for free so you can manage the access for your application. This means that an app can be restricted if needed by utilizing the 2FA approach or even configuring the SSO with third-party identity provider. Also, Cloudflare offers web analytics for free. Finally, if your site has been added to Cloudflare, applying the custom domain name is a matter of clicks and you can make use of all the powerful Cloudflare features.
It is worth noting that for now, Cloudflare only supports GitHub, but if you’re not a fan, don’t worry. The support of other login options is coming soon.
Moment of truth
As we saw above, both are easy to set up in just a few clicks. But let’s take a closer look at the differences in features and performance.
Below you can find a comparison of features between Netlify and Cloudflare Pages.
According to the table above, we can see that Cloudflare is rather focused on performance and security (QUIC, HTTP3, number of data centres) when compared to Netlify, where we have some fancy features such as Form handling, rollback to any version functionality, etc.
Now let’s see what this means in reality and what are the actual measurement results with both vendors. In the example below I’ve deployed a Vue.js application, which pulls content from Kentico Kontent (headless CMS by Kentico) to both Netlify and Cloudflare Pages. I also measured both sites in Google Speed Insights and GT Metrix to see the difference in performance between those two instances.
Measurements on Google Page Speed Insights (Desktop):
Measurements on GT Metrix:
As you can see in the images, both applications load blazingly fast. There is one difference, however. The time to the first byte (TTFB) for the application deployed on Cloudflare Pages is 57ms and for the application on Netlify it is 227ms. Also, according to Page Speed Insights, the speed index for instance on Cloudflare is 0.7s and for the one on Netlify is 1.2s. Moreover, GT Metrix shows it took 585ms for the app on Cloudflare to load, compared to 1.5s on Netlify which is more than double.
Hope you enjoyed this article and hopefully, this gave you some insight when it comes to both platforms.
In this article, I introduced Netlify and Cloudflare Pages, illustrated the differences between the two, showed you how to configure and build a site from Git and measured the performance of the apps deployed. Thanks to its resilient and reliable CDN, Cloudflare ultimately won this battle over Netlify. However, there are a number of other factors to consider when hosting a site, to make sure to properly evaluate every host before making a final decision.
If you have any further questions or need assistance, join the Kontent community on Discord and we’ll help you.