Netlify vs. Cloudflare Pages

Netlify vs. Cloudflare Pages

January 5, 2022.

Serverless technologies really help developers deploy and manage the applications through a cloud provider. This can minimize the costs because the developers do not pay for what they don’t use and they don’t need or require being able to maintain a server.

• Netlify, is a powerful serverless platform with an intuitive Git-based workflow, automated deployments, and shareable previews, has been a huge player among serverless platforms since the year 2014.
• However, with Cloudflare’s introduction of the Cloudflare Pages in the month of April 2021, a Jamstack platform for frontend developers to easily collaborate and deploy the websites, Cloudflare Pages has seen increasing drastically by the community.
• And, as recently as November 2021, the Cloudflare Pages announced it’s now a full-stack platform, creating direct competition to the Netlify because developers can now develop the backend functions and frontend code together.
• With this competition, in thisblog-post, we’ll be discussing how the two compare in terms of developer experience, performance, and the build time to help enable you to make informed decisions when you are deploying your very own Jamstack website.

We’ll compare:

• Third-party signup services
• How can you use functions?
• CLIs
• Bandwith, setup, and supported languages
• Build times

Third-party signup services

• Third-party signup services are great alternatives to the username/password authentication and are critical when you are measuring the success of an onboarding experience. When you are comparing Netlify to Cloudflare, Netlify makes signing up way lot easier than Cloudflare.
• Netlify allows and enables the users to sign up or log in via third parties like GitHub, GitLab, Bitbucket, and email while the Cloudflare Pages only allows and enables the email sign-up and login.
• Because most developers are already logged into their own version control platforms on their browsers, signing up or into Netlify is more convenient as it uses the credentials of those version control platforms. Developers can then very 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 very mundane and tedious.

Using functions in Netlify versus in Cloudflare

• Both Netlify and Cloudflare Pages follow the very same rules when you are adding functions for dynamic features, such as needing and requiring us to put everything create a ./functions folder, including the dynamic features.
• Let’s now take a glance at how to route and write the serverless functions in Cloudflare Pages and in Netlify.

Function routing in Cloudflare Pages

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

For instance, assume this directory structure:

├── …

├── functions

| └── api

│ ├── [[path]].js

│ ├── [username]

│ │ └── profile.js

│ ├── time.js

│ └── todos

│ ├── [[path]].js

│ ├── [id].js

│ └── index.js

└── …

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

/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 on the Cloudflare platform

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

//js

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 given because it generically handles all of the HTTP requests.

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

1. onRequestPost
2. onRequestPut
3. onRequestPatch
4. onRequestOptions
5. onRequestDelete
6. onRequestHead

These are the requests that you export to write your very first function. For instance, you can write a function to output or display “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 of the functions in Netlify are deployed with the following:

• us-east-1 AWS Lambda region (also why exactly they are still referred to as Netlify Lambda functions)
• 1024MB of memory
• 10-second execution limit for the synchronous functions
• 15-minute execution limit for the background functions
• To develop and create a function in Netlify, we must first create a ./functions folder; note that you can call this folder anything that you feel like.
• We are then needed to create a netlify.toml file in our root directory. This tells Netlify where to look when deploying functions. Since we had 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 the Netlify platform

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

// js

exports.handler = aysnc function(event, context) {

return {

statusCode : 200,

body: JSON.stringify ({message: “How far, Howdy?”})

};

}

But, let’s now say we have a React application running at http://localhost:8080. We can access the function that was mentioned above http://localhost:8080/.netlify/functions/hello or even http://localhost:8080/functions/hello.

Serverless functions request the usage

• Netlify allows and enabled about 125K requests of serverless functions per the site monthly; Cloudflare Pages, on the other hand, has a very different approach. At the time of writing, during open beta, it allows 100K invocation requests almost daily. This sounds great, doesn’t it? but keep in mind that if you have 10 websites deployed on the Cloudflare Pages, the 10 websites will share the 100K requests.
• Since this particular feature is still in beta for the Cloudflare Pages, we’ll need to see how exactly do these limits shake out in full release before assessing which platform or medium has the upper hand.
• Thank you for reading this blog!
• To know about Industrial based learning and more information like this make sure to register yourself at NullClass now !