Matt Angelosanto for LogRocket

Posted on Jan 11, 2022 • Originally published at blog.logrocket.com

Netlify vs. Cloudflare Pages

#netlify #serverless #webdev #discuss

Written by Precious Luke ✏️

Serverless technologies help developers deploy and manage apps through a cloud provider. This can minimize costs because developers do not pay for what they don’t use and they don’t need to maintain a server.

Netlify, a powerful serverless platform with an intuitive Git-based workflow, automated deployments, and shareable previews, has been a major player among serverless platforms since 2014.

However, with Cloudflare’s introduction of Cloudflare Pages in April 2021, a Jamstack platform for frontend developers to collaborate and deploy websites, Cloudflare Pages has seen increasing adaptation by the community.

And, as recently as November 2021, Cloudflare Pages announced it’s now a full-stack platform, creating direct competition to Netlify because developers can now create backend functions and frontend code together.

With this competition, in this article, we’ll discuss how the two compare in terms of developer experience, performance, and build time to help you make informed decisions when deploying your own Jamstack website.

We’ll compare:

Third-party signup services

Third-party signup services are alternatives to username/password authentication and are critical when measuring the success of an onboarding experience. When comparing Netlify to Cloudflare, Netlify makes signing up a lot easier than Cloudflare.

Netlify allows users to sign up or log in via third parties like GitHub, GitLab, Bitbucket, and email while Cloudflare Pages only allows email sign-up and login.

Because most developers are already logged into their version control platforms on their browsers, signing up or into Netlify is more convenient because it uses the credentials of those version control platforms. Developers can then easily deploy code from these platforms.

While Cloudflare Pages provide integration with GitHub and GitLab, the sign-in process via email can make using Cloudflare Pages tedious.

Using functions in Netlify vs. Cloudflare

Both Netlify and Cloudflare Pages follow the same rules when adding functions for dynamic features, such as requiring us to put everything create a ./functions folder, including dynamic features.

Let’s now see how to route and write serverless functions in Cloudflare Pages and Netlify.

Function routing in Cloudflare Pages

In Cloudflare Pages, using a ./functions directory generates a routing table based on the files present in the directory. You can use JavaScript (*.js) or TypeScript (*.ts) to write your functions.

For example, assume this directory structure:

├── ...
├── functions
|   └── api
│       ├── [[path]].js
│       ├── [username]
│       │   └── profile.js
│       ├── time.js
│       └── todos
│           ├── [[path]].js
│           ├── [id].js
│           └── index.js
└── ...

The following routes will generate based on the file structure, mapping the URL pattern to the ./functions file that is invoked:

/api/time => ./functions/api/time.ts
/api/todos => ./functions/api/todos/index.ts
/api/todos/* => ./functions/api/todos/[id].ts
/api/todos/*/** => ./functions/api/todos/[[path]].ts
/*/profile => ./functions/api/[username]/profile.ts
/** => ./functions/api/[[path]].ts

Writing functions in Cloudflare

When writing request handlers within your Cloudflare Pages application, each ./functions file must export a function to handle the incoming request. Each function then receives a singular context object, which contains all the information for the request:

export async function onRequest(context) {
  // Contents of context object
  const {
    request, // same as existing Worker API
    env, // same as existing Worker API
    params, // if filename includes [id] or [[path]]
    waitUntil, // same as ctx.waitUntil in existing Worker API
    next, // used for middleware or to fetch assets
    data, // arbitrary space for passing data between middlewares
  } = context;

  return new Response("How you dey?");
}

In the above code sample, we exported an onRequest function. This is a generic name because it generically handles all HTTP requests.

However, to react to specific HTTP request methods, you can use the method name as a suffix to the exported function. For example, a handler that should only receive GET requests should be named onRequestGet. The following are other handlers that Cloudflare Pages supports:

onRequestPost
onRequestPut
onRequestPatch
onRequestDelete
onRequestHead
onRequestOptions

These are the requests you export to write your first function. For example, you can write a function to output "Hello World" when you make a post request to /hello-world in the /functions/greetings.js file:

//functions/hello-world.js
// Reacts to POST /hello-world
export async function onRequestPost(request) {
  // ...
  return new Response(`Hello world`);
}

Function routing in Netlify

By default, all functions in Netlify are deployed with the following:

us-east-1 AWS Lambda region (also why they are still referred to as Netlify Lambda functions)
1024MB of memory
10-second execution limit for synchronous functions
15-minute execution limit for background functions

To create a function in Netlify, we must first create a ./functions folder; note that you can call this folder anything.

We are then required to create a netlify.toml file in our root directory. This tells Netlify where to look when deploying functions. Since we decided to put our functions in a functions folder, this file should look like the following:

//netlify.toml file
[build]
  functions = "functions"

Writing functions in Netlify

Let’s now assume that we have a function that is called hello.js, which will make our function available at .netlify/functions/hello:

exports.handler = aysnc function(event, context) {
  return {
    statusCode : 200,
    body: JSON.stringify ({message: "How far, Howdy?"})
  };
}

But, let’s say we have a R eact application running at http://localhost:8080. We can access the above function at http://localhost:8080/.netlify/functions/hello or http://localhost:8080/functions/hello.

Serverless functions request usage

Netlify allows 125K requests of serverless functions per site monthly; Cloudflare Pages, on the other hand, has a different approach. At the time of writing, during open beta, it allows 100K invocation requests daily. This sounds great, but keep in mind that if you have 10 websites deployed on Cloudflare Pages, the 10 websites will share the 100K requests.

Since this feature is still in beta for Cloudflare Pages, we'll need to see how these limits shake out in full release before assessing which platform has the upper hand.

Netlify vs. Cloudflare Pages CLIs

Both Cloudflare Pages and Netlify have wonderful built-in CLI tools, which help us work locally with both platforms to develop and test everything in the development stage before pushing to production.

The full-stack Cloudflare Pages brings W rangler, which is easy to install, specifically through npm and cURL. Netlify, on the other hand, has Netlify CLI, which can also be installed with npm.

Authentication processes in the CLI

Both Cloudflare Pages’ and Netlify’s CLIs have the same authentication method of storing a machine’s access token for future uses.

In Cloudflare’s system, however, you have a user that can have multiple accounts and zones. As a result, your user is configured globally on your machine via a single Cloudflare token.

Your account(s) and zone(s) will then be configured per project but will use your Cloudflare token to authenticate all API calls. A configuration file where the account(s) and zone(s) information is stored is created in a .wrangler directory in your computer’s home directory.

Netlify’s CLI uses an access token to authenticate with Netlify. You can obtain this token using the command line or in the Netlify UI.

To authenticate and obtain an access token using the command line, enter the following command from any directory:

netlify login

This will open a browser window, asking you to log in with Netlify and grant access to the Netlify CLI.

Once authorized, the Netlify CLI stores your access token in a [config.json](https://docs.netlify.com/cli/get-started/#config-json-location) global configuration file. The Netlify CLI then uses the token in this file automatically for all future commands.

Bandwidth, setup, and supported languages

Bandwidth is the capacity of data that can be transferred between a site, its users, and servers. While Netlify places a 100GB monthly bandwidth limit on its free tier option, Cloudflare Pages does not; in fact, it is unlimited.

However, 100GB monthly is pretty large, and the 100GB of data can transfer between users of a site deployed on Netflify’s server.

As for setup, both platforms are straightforward and easy to set up projects. They both support Secure Sockets Layer (SSL) certificates for free, which provides encryption for sensitive data sent across the internet.

For language support, full-stack Cloudflare Pages supports JavaScript and TypeScript, whereas Netlify supports Golang, JavaScript/Node.js, and Typescript.

Build times

The build time is the time it takes to build a project out completely after it is deployed. This could be after you push a change to your GitHub or Gitlab repository synced to either Cloudflare Pages or Netlify.

For the free tier options of both platforms, Cloudflare is better. While Netlify measures build by minutes (300 minutes/month), Cloudflare Pages measures by the number of times you build in a month, which is 500 builds/month regardless of how long a build takes.

Conclusion

While Netlify has been a standard of serverless platforms since 2014, full-stack Cloudflare Pages seems to be promising in Jamstack website deployment.

With both platforms providing a way to run backend code on their servers, it is a dream come true, especially for those not-too-big projects.

However, developers may want to choose Netlify over Cloudflare Pages because they can reliably expect 125K serverless function requests per month (125K) on each site on the free tier. We'll need to see what kind of limits Cloudflare Pages implements when it's out of beta.

On the other hand, when you look at bandwidth, Cloudflare Pages gives an unlimited 1GB as opposed to the 100GB per month that Netlify gives.

LogRocket: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.

DEV Community