The Best Frameworks and Servers for 2022 on the Edge

There is new and old technology you probably don't know about. But the question still stands...

Where do I deploy my app?

Well, it depends. You don't know it, but you really only have 3 options.

1. Amazon Web Services
2. Google Cloud Platform
3. Microsoft Azure
4. Some very very small options including IBM

Amazon holds the majority, at around 40% of the market share of all websites on the internet. This includes the top hosting providers:

• GoDaddy
• Vercel
• DigitalOcean
• Netlify

I don't know anyone who uses Azure or IBM, but they have a small, but non-negligible part of the market share.

Amazon has a terrible monopoly, hence why it IS such a big deal that it kicked off Parler, Twitter's direct competitor, from their servers for no proven reasons. That, however, is for another post.

Today, I am going to focus on the servers listed above and their respected technologies.

NodeJS

While PHP is getting faster for Wordpress users, there is still a large need for JavaScript. All frontend frameworks use it. However, client side rendering simply is not as fast as server side rendering (unless the server is rendering a crap load of items at once). As we also know, your search engine score is never going to take off if you can't generate basic meta tags on your dynamic pages. Client Side apps alone are also getting overly complex. We will, for the foreseeable future, need both.

Terms

• Client Side Rendering (CSR) - html generated dynamically in the client's browser
• Server Side Rendering (SSR) - html generated dynamically from the server
• Static Site Generation (SSG) - pre-generated static html
• Hybrids using SSG, SSR, and CSR
  • Incremental Static Regeneration (ISR) - NextJS method which generates static pages, then re-loads the page on the client after a certain time in the case where the dynamic data has been changed
  • Automatic Static Optimization - NextJS feature that automatically determines which pages to generate statically, and which to generate dynamically
  • SSR Streaming - Currently in Alpha version of React 18, allows you to render lazy-loaded components using promise based concurrency and await under the hood (startTransition, Suspence)
• Puppeteer - Uses a second server with Headless Chrome (a server-side browser) to display server-side only for bots... Rendertron is an example

Serverless Functions

If you deploy your app, you want to deploy it quickly. Running a full time scalable server can get expensive. Then, came the invention of serverless functions. You are pretty much going to be running an AWS Lambda or a Cloud Run Container. What you don't know is how powerful these things really are. If you have the money, you can make them so freaking quick. They are not really functions, but microservices that can do anything. Other providers can just make them cheaper, but with limited functionality.

Vercel, for example, builds their own, but has a 50MB limit. Netlify has a 10s limit. They are made for certain things.

Vercel Inovations

NextJS has created a new way of thinking, or a new type of hybrid. If you deploy a NextJS app to Vercel, every single page runs on its own serverless function. This is important if you have a large React App. I suspect SvelteKit will follow in these footsteps now that Rich Harris (creator of Svelte) is on board with Vercel.

While this means the future of the internet is looking more like React and Svelte only, I am always onboard with innovation. However, I don't know that a React Serverless Function for every page is always, or even most of the time, the best option. It still needs to spin up every page, as small and quick as they may be.

Edge Computing

Google and Amazon have an edge (hehe). It is the extremely quick network of servers that connect to ISPs around the world. When you put your serverless functions on the edge, which you can do in Google or any of Amazon's hosting children (Vercel, Netlify, etc), not only will their functions spin up quickly, but the information will get transmitted to your clients as quickly as possible.

Content Delivery Networks (CDN)

Your static data can get cached on CDNs around the world, also delivering the information as quickly as possible.

Most of these server platforms provide a CDN for free for your static data, but charge for the edge computing. Google, for example, requires some configuring and starts around $20 a month. Vercel adds this out-of-the-box on their first payment plans.

Vercel Edge Functions

This is going to be Vercel's second best innovation, not be confused with serverless functions or the edge network (Vercel's edge computing network).

Basically Vercel allows you to run micro-computing on their Edge Network. However, it never spins up. It is not made to host even a full page of an app, so it is a cheap tool for Vercel. It is limited to only 1MB and must return a response in 1.5 seconds...

What is this for you ask? It is a middleware function that will run before your client side javascript is generated, per page. Since it is so small, and has no cold-starts, it must be always running on node server. The main use I can see is SEO. It is also good for backend auth, analytics, etc.

This is kind of genius, but not practical in all cases. Again, you're currently limited to NextJS, so React.

Puppeteer

The Rendertron idea never seemed to have taken off. I personally have emailed Vercel and Netlify trying to explain to them how it could benefit them if they implemented this. I really don't think they understand how it works. It is not all on one server, so it is not slow.

Basically you have two server instances. Your Rendertron server could be on a cold-start serverless function. It can only be run with a secret key, and returns the html of the website you send it. Your app server would be separate, and very very small. All it needs is a bot checker and a fetch command. When a user requests a page on your site, your app server just sends it to the html page with CSR only. If it is a bot, your app server directs to your Rendertron serverless function server with your secret key, and sends back the appropriate html for the BOT and SEO.

The large puppeteer package ONLY gets loaded for Bots.

My Million Dollar Hosting Idea

So I had an idea for these hosting platforms. What if they had a Rendertron server on their edge network that is always running. This theoretical hosting platform would only support CSR and SSG sites, however, the SEO would be automatically generated for every site they host. The user could only change certain rewrite rules.

This pretty much solves every single SSR need (not talking about serverless computing, as that is a separate need). The only problem is speed. Backend rendering is supposed to be faster than client side (it is a server after all), but that really depends on the amount of computing and computing power your server is actively using. Personal Computers are not slow to render JavaScript at all. There are not really any true Angular Universal, NuxtJS, NextJS, or SvelteKit/Sapper items without CSR, so I would argue this is a moot point. You could even run Flutter Web with SEO on this thing!

Either way, my idea would definitely be useful for many people who care about the generated part of SEO only.

What are your thoughts?

So we need to use NextJS or SvelteKit in 2022?

Maybe. I built a few Apps in SvelteKit, but it is still a baby. The Material UI kits are funky or non-updated, and other UI Frameworks don't even work currently with SSR. The development time is so quick as you master SveltKit in a week.

I think I hate React due to Facebook (your billionaire creepy uncle who keeps telling you to hush), Hooks, and the overly stuffed create-react-app with modules that aren't even maintained, or maintained by different people. However, the majority of you disagree with me (or agree but still use it for work purposes).

You can't argue Edge Functions are freaking cool. I am not a fan of Vercel's Serverless Functions for every page, but their File System Api will eventually work on any Framework that supports it.

The ISR and Streaming functions of NextJS could technically be manually configured in other frameworks, but it would not quite work as NextJS is working to optimize it.

But SvelteKit will probably have all this functionality soon as well in 2022.

What about Angular Universal and Nuxt?

I freaking love Angular. You can't go wrong with Angular Univeral on Cloud Run with Cloud Build and Google Cloud CDN. They now have the Edge Computing Network ready to go as well.

Sure, SvelteKit is smaller, faster, and easier to learn than all Frameworks, but it is NOT a trusted enterprise-ready Framework. If you need complex data, it is simply not ready yet. If you are building your personal blog, this is 100% the way to go.

I do not have much experience with Vue. From what I can see it is trying to take the best parts of React and Angular and put them together. It is enterprise ready from my limited experience.

React has options. Many options. Too many options? It has been pasted in so many different ways.

Build with what you know. I think too many people focus on micro seconds of loading time, when they should be focusing on development time. The user doesn't care how you built it, only that it works, and works quick enough.

But these are just my opinions and observations...

Any other technologies I am missing?

J