What is hosting, who are the best hosters, what are the differences, and what is the cost?
Let's break it down!
What is hosting?
Hosting is where the website lives. In the old days, this was a physical server running somewhere in the building. Nowadays, all of that infrastructure has been abstracted and the entire hosting experience is managed via a web-based UI on someone else's servers.
CDN stands for Content Delivery Network. Rather than having a single server, there are multiple servers around the world that deliver your website as close as possible to the end-user.
An Edge Network is a distributed computing network. Same concept as above, but for processing data.
Imagine a user in Britain accessing a website that is hosted on the west coast. That's a long way for the data to travel! With a CDN, the hosting platform copies the website to all of its server locations around the world, ensuring that the user in Britain is requesting the data from a source nearby.
What do Nacelle merchants use?
It's a pretty even split between Cloudflare and Vercel, so that's what this article focuses on. There are other hosting options, like Netlify.
What are the differences?
Out of the Box Functionality- Based on our experience, Vercel is easier to use 'out of the box'. The path to set up and deploy your website is quicker than on Cloudflare. This is especially true for React projects, since Vercel owns React.
Price- The pricing models are completely different. Vercel Pro is $20/user/mo, with 1 TB of bandwidth. Overages are $400/TB. 5 users, with no overages, is $1200/yr
Vercel Enterprise includes direct support from Vercel and added security features, pricing varies.
Cloudflare business is $2400/year, with unlimited bandwidth. If you are interested in Cloudflare, it would be worthwhile to discuss with their team what plan is right for you.
Performance- It's very difficult to assess the performance of different sites on different hosters, but we have seen relatively equivalent site speeds between Cloudflare and Vercel.
Pros and Cons
Vercel Pros- easy to set up, easy to manage, built in Analytics
Vercel Cons- Expensive for high-bandwidth sites, cost fluctuates with traffic
Cloudflare Pros- consistent pricing, good control over the site
Cloudflare Cons- a more time consuming setup, works differently than Vercel for some things
Using Cloudflare with React Next Projects
Cloudflare is trying to be competitive with Vercel so they have a package for Next specifically (@cloudflare/next-on-pages) which is supposed to have full support for deploying NextJS apps including SSR (Server-Side Rendered) and middleware.
With that Next package, the main 'challenge' will be familiarizing yourself with Cloudflare's dashboard and ensuring that you can run builds successfully.
Fortunately, Cloudflare has a free hobby plan that allows you to build no-cost POC's.
Using Cloudflare with Vue Nuxt Projects: