Thoughts on migrating from Netlify to Cloudflare Pages

For the past few years, I’ve hosted my blog and other small websites on Netlify. Recently, I came across a post on Reddit mentioned a DDoS attack on Netlify’s Free Plan resulted in an unexpectedly massive bill.

Although I didn't have any issues with DDoS attacks on my sites, I decided to move my websites to Cloudflare Pages.

Why? Unlimited bandwidth, built-in DDoS protection (provided by Cloudflare!), and unlimited sites for FREE. Sounds too good to be true, doesn’t it?

Migrating from Netlify to Cloudflare Pages

I used my weekend to figuring out the migration process.

It was actually really simple. The only real challenge I faced was adjusting to the different syntax between Netlify Functions and Cloudflare Page Functions.

For static websites without any serverless functions, the process was even easier. All I had to do was connect the project from GitHub or GitLab and update my DNS records. Simple and straightforward!

(Although I panicked when the URL provided by Cloudflare didn’t work right after the first deployment. I just needed to wait 1–2 minutes for it. Once that was done, everything worked perfectly.)

During the migration process, I noticed a few key differences. (Caveat, my website are small and have low traffic, so all are based on my personal experience.)

Netlify Functions and Cloudflare Page Function

For serverless functions, the main difference is the function name. In Cloudflare Pages Functions, you use onRequest, whereas Netlify Functions is handler.

Netlify Functions:

import { neon } from '@neondatabase/serverless';

export async function handler(event) {
    try {
        if (event.httpMethod !== "POST") {
            ...
        }
    }
    ...
}
...

Cloudflare Page Function:

import { neon } from '@neondatabase/serverless';

export const onRequest = async ({ request, env }) => {
  try {
    if (request.method !== "POST") {
        ...
    }
  }
  ...
}
...

In Netlify Functions, you can access environment variables using process.env.<ENV>, but in Cloudflare Pages Functions, they need to be referenced as env.<ENV>.

Better developer experience on Cloudflare Pages

For development, Netlify relies on netlify-cli, which can be a bit frustrating at times. For example, if a function throws an error, it might crash the process, but the development server would still run in the background... so I ended up with my website opened in multiple ports.

Cloudflare used wrangler to setup its configuration and local environment variables, rather than using .env files.

First, I'll need to run npx wrangler pages download config <project> to download my wrangler.toml, then setup a .dev.vars file with my local variables like this:

NODE_ENV = 'development'
BACKEND_URL = '<backend_url>'

Once everything was set up, the development experience was smooth and seamless. Unlike netlify-cli, which could occasionally be slow or problematic, I didn’t encounter any issues with wrangler.

The dashboard and logs are clearer on Cloudflare dashboard too.

Page speed

The pages hosted on Cloudflare Pages are noticeably faster compared to those on Netlify!

Netlify pages typically take about 0.5 seconds to load the first meaningful paint with my slow broadband, Cloudflare Pages load almost instantly.

For serverless functions, I connected to neon database on some of my websites. I realised Cloudflare has faster response times too.

Summary

I migrated five websites from Netlify to Cloudflare Pages without encountering any major issues. Since I already manage my DNS records through Cloudflare, the process was even smoother. Sweet!

(I kept typing CloudFront when I wrote this post, I have no idea why...)

Wishing everyone a great weekend!

Yuki Cheung @snowleo208