Building a POC application with Next.js, choosing Vercel vs. Cloudflare - Part 3

Welcome to Part 3.

If you missed it, you can find Part 1 and Part 2 here.

You may recall in Part 1, that deploying and hosting my POC was a part of the fundamentals. There are a couple of major reasons for this;

1. Sharing and demo'ing the POC is better when it isn't restricted to just one laptop. Giving stakeholders something to touch and feel is an important part of the "buy-in" process. Allowing them to login and experience it gives them immeasurable validation. I recall my career at Sitecore and more specifically in pre-sales, when we went head to head with other vendors, the speed of which we could deliver a POC was our differentiator, but once we automated putting it in the cloud, allowing us to leave it with them during the sales cycle was next-level competitive edge.
2. Validating potential deployment and hosting models was another part of the fundamentals. As we discussed previously, Next.js and MACH application development (outside of the confines of an enterprise Headless CMS) was something "new" to this scenario and going full circle on a basic DevOps and hosting process needed to be understood.

You may also recall from Part 2, I said "Off I went to the Cloudflare Dashboard", but first, a little history and context.

Introducing the contenders

I have long being a huge advocate for Cloudflare , as a security and acceleration platform it is brilliant and streets ahead of the competition in CDN, WAF, Zero-trust etc. Now, they have a product called Cloudflare Pages, and it offers;

• Developer-focused?with effortless Git integration.
• Advanced collaboration?built-in with unlimited seats.
• Unmatched performance?on Cloudflare’s edge network.
• Dynamic functionality?through?integration with Cloudflare Workers.

And it works, it really does.

In the last 5 months have hosted several simple marketing websites on Cloudflare Pages, they were built using relatively vanilla Gulp, HTML, CSS and JS, but they were not complex Next.js apps.

No API's, databases, or JavaScript frameworks.

Cloudflare's incredible network, combined with clean code means sites have achieved A scores for Core Web Vitals around the world.

Latest Performance Report for: https://www.riverbridgehouse.co.uk/ | GTmetrix

You honestly cannot fault it.

Who is the other contender then?

In the documentation and starter guides for Next.js it is entirely fair that Vercel is mentioned heavily. They offer a "one-click" deploy experience for many of the samples and a freemium style model is in place, with the Vercel Hobby edition being very usable. Checkout pricing and features here.

It is fair to say that I am being heavily influenced to deploy on Vercel at this point. But as with many things in life, we tend to gravitate to things that we know, things that work and have had positive experiences with in the past.

I have also had success with Azure Web Apps and Static Web Apps, but I specifically wanted to stay away from Azure in this exercise.

So, history and context aside, I ignored Vercel's marketing team and off to Cloudflare Dashboard I went.

Disclaimer

For the purposes of fairness, I am very confident that both Cloudflare and Vercel can deliver an outstanding experience. Feature rich, enterprise-capable and with their own unique pros and cons. This is not designed to be a traditional "shoot out", where I declare one is better than the other.

I couldn't do this anyway, as I would need detailed real-world production level experience to accurately do this, something I don't have in both, yet. You are welcome to share your experiences in the comments.

Welcome to a world of pain

As I started in the Cloudflare Dashboard, you are presented a very simple UX;

When you click on "Connect to Git", you are presented with another very simple UX, and because I have already connected my GitHub account to Cloudflare, it allows me to quickly choose a repository. If you haven't, it takes less than 2 minutes to connect your GitHub account.

Note: if you connect and cannot see your repos, you may need to head to GitHub and allow Cloudflare to see all repos. This caught me out.

As you keep going, Cloudflare gives you the option to choose a Framework preset, add your environment variables then hit "Save and Deploy".

Once you have gone past this stage, you are taken to the very slick Deployments screen, and here you will watch your application come to life.

As you can see from the screenshot above, the connection times and repo clones were very fast, I could see the output and logs on the screen.

So far. So good.

On no, I spoke too soon.

At this point I encountered a raft of errors.

In fairness, these were arguably my fault. In short, I didn't RTFM.

JavaScript based, headless development suffers from a major issue.

Stuff improves and releases all the time! Monthly, even Weekly. For example, in 36 months Node.js has gone from v14 to v19.

Quite the paradox that in years past we complained about software giants like Microsoft taking too long between .NET versions and now we are arguably complaining that they are too fast.

I struggled to find a meme for this one.

Back to the problem at hand

Cloudflare was doing its best here and the error logging was clean and easy to access, so I started troubleshooting and had to fix;

• Node version for compatibility with Prisma, it complained that couldn't use the latest, so I had to read Prisma documentation and ended up on Node.js 17. But on the other had it worked locally on Node 18, so I suspect something deeper or a dependancy was in play here.
• Environment variables scoped to the correct Production environment
• Modify package.config to update library versions to be compatible with Node 17. Although I was worried this might have some longer term impact.

I got through most major issues, which in reality came down to one big factor, Cloudflare Pages does actually support Node.js v18.

This took me a while to work out, as a novice in this space, I am not intimate with the overall dependancies here. The Starter Kit, my local machine and all the documentation has assumed I'm running Node.js v18. At this point I had pretty much downgraded most things, but as above, I was blissfully unaware of what impact this would have on the app.

Surely you could live with the downgrade?

Well, yes, in theory.

But let's get back to the POC fundamentals of "configuration over code", "seamless deployment process" etc. Every modification I needed to do here was a step away from this mantra and as an amateur here, I was loathe to go deeper.

So I got through most of these issues and moved onto the final boss error.

"The following functions were not configured to run with the Edge Runtime"

At this point Cloudflare was very helpful, they offered 3 potential solves, which were links to documentation on the Next.js website. But at this point, I was a few hours in to Cloudflare, getting a bit hangry and honestly did not want to go down the route of getting lost in heaps more documentation. Don't forget I had already modified the app with unknown consequences to get to here.

So I did the following;

1. Started reading the Cloudflare docs again, Deploy a Next.js site · Cloudflare Pages docs, this mostly sent me back to Next.js website articles, and when I cross checked the code, I felt like it was setup correctly.
2. Google'd some articles, all of which sent me into a level of Next.js territory I was not familiar (or likely capable at this point) with.
3. Gave up.
4. Went to lunch.
5. Enjoyed lunch.

Where to from here

I came back determined to solve this, but the pragmatist in me couldn't help ignore the "Deploy this on Vercel" messages throughout the documentation. I was starting to feel guilt, how could I leave Cloudflare at this point.

Well I had to, my skills and time (which is more important), weren't in a position to negotiate and I needed to finish this part of the journey.

"Vercel has entered the chat"

With a reluctant spring in my step, I headed over to the Vercel website.

I was lured into creating a Pro Trial, free for 14 days, I am not sure if I just missed the "choose Hobby edition", or it's just good marketing, but I was signed up, fast.

Very similar (uncannily similar) to the Cloudflare UX;

1. Import Git repository
2. Set environment variables (the scoping UI is a bit more intuitive tbh).
3. Deploy

Note: I did revert my branch back quite a few commits (Node 18 etc.).

Only this time, in 1m and 34 secs I had a green build. It produced a temp URL based on the project name and showed a working app in my browser.

Incredible.

Incredible, well almost.

From this point on I had a very seamless experience, the Starter Kit app I was using is actually quite complex and in order for it to work, it needs a few subdomains to access different parts of the functionality.

Vercel offers a URL for your project, but it doesn't support wildcarding with it, which is understandable. So I;

• Register a new domain name
• I used a .dev (get.dev) from Google through GoDaddy
• Register it in the Vercel UI
• Change the GoDaddy nameservers to Vercel nameservers
• Modify the Next.js middleware.js config settings to my new domain
• Redeployed (in 45 seconds!)

And... Voila.

My app was ready, in the cloud on Vercel.

So what was different?

Now, at this point I honestly had no idea why it "just worked".

The support for Node 18 is likely a big factor, this removed a heap of issues.

But after spending some time delving into the Cloudflare documentation it was a much bigger issue. Namely the no support for Serverless Functions and the different approach Cloudflare takes to API routes.

I cannot tell you what exact code translates to which missing feature, honestly, because I don't have the time to try and work it out. I am against the clock and under POC rules, I had met most of my goals. I would put a note in my project write up that this should be investigated and feasibility checked the future.

You can checkout the following articles for more information;

• Migrating from Vercel to Pages · Cloudflare Pages docs
• Known issues · Cloudflare Pages docs

Another major issue which would have precluded me from running this Starter Kit, is no support for Wildcard domains, even custom ones. Now I didn't get this far with Cloudflare and only discovered it when compiling this article.

Where did I finish up?

Once I had lost some time crying over not being able to use Cloudflare, I was able to develop more features and add some more components, aside from a couple of build failures, I continued to deploy many times, very quickly.

Just look at the speed of compilation-to-deploy from check in. Whilst my app is relatively small, I come from a world of .NET where the build alone, can take significantly longer. I know its "not the same", but these things are markers of the overall long term developer experience, which if you recall is a part of the POC.

Closing

With my investment in this POC so far, I am really excited about Next.js.

Although the decision to deploy on Vercel was somewhat forced on me, in time, I would ask a competent developer, to revisit Cloudflare Pages to understand if it is the better option, but for now, I will stick with Vercel.

I have tried to summarise some final points;

• Whilst we can sometimes be wedded to existing technologies (like Cloudflare), when doing something new, it pays to be open minded.
• I commend Vercel for creating a hosting product that appears to provide the best 1st class experience for Next.js. They are walking the tight rope of 1st party support for an Open Source product they "own/develop", but also making Nuxt.js and 14+ other frameworks front and centre too.
• I am not saying Vercel is perfect, nor have I evaluated it for Production yet, it may well have flaws and limitations that would need to be discovered should the POC graduate. It certainly has the case studies that show its capability.
• I commend Cloudflare for being completely open and documented about how they do things differently or don't do them at all.
• There are lots of other Edge options in the marketplace, so in time I would also investigate these.
• I would hazard an uneducated guess that Cloudflare would have "the edge" so to speak when it comes to content delivery speed and latency.
• I commend BOTH for such brilliant, easy to follow documentation. In comparison, I have tried the Nuxt.js documentation and it is nowhere near as slick. I also find the font hard to read on the Nuxt.js site.
• In the end, whilst I am apprehensive of them, the Starter Kit suited my requirements well and for the purposes of the POC, got me "as close as possible" to the end goal.
• This POC shows that coding choices have a direct impact on hosting choices and consequently build & release tooling.
• You cannot decide code-first, hosting later or vice versa. It is iterative. You need to map the pros, cons and risks of both, iterate through them and be prepared to compromise where appropriate. In my case, I compromised coding decisions for the hosting environment in the name of speed and simplicity. You may choose, or need to do different.
• Vercel's product and marketing teams appear to be doing a great job of getting across real-world use cases and their funnel is focused on creating solutions to the very same problems that this POC is attempting to address. The way they address it is clean and doesn't, at the moment appear to create a proprietary sense of vendor lock in.
• What I mean by that last point is that if its Open Source, they say so, if its a proprietary or paid feature of Vercel, they also clearly say so. Allowing me to make decisions on where I spend my time, before I get too far down the rabbit hole and end up "locked in".
• I didn't like how quickly I ended up on a Pro Trial. I am not 100% sure if my app will stop working in 10 days time. It doesn't appear so, but unless I delete and recreate the account, we wont know until a few weeks from now!

Headless and MACH architecture decisions are vast, complicated and this is reflected in the State of JS 2022 report. The biggest pain point they cite is Code Architecture, and I can agree, although interestingly whilst this report cites Build Tools as a major issue, it doesn't talk about hosting specifically.

Hopefully from this series, you can appreciate the value I hold in rapid prototyping, and you may have learnt from an novice like me, how I approach POC's with the outcome of proving theories and educating myself to have better conversations with professional solution architects and senior developers when helping them achieve goals.

Thank you.

All feedback, questions and comments welcome.