I’ve been doing Front-End Development for more than a year now and recently have been exploring the domain of Front-End Engineering where the creators go beyond development and focus on usability & user experience. I’ve been a fan of Vercel ever since I started developing with Next.js and now Layer0 has certainly made it’s way to the top of the list. This blog will keep you apprised of my learnings from Next.js Conf, my experience with Vercel, what convinced me of Layer0 and my experience with deploying an application charged up by the Fastest Backend for Frontend(BFF), Layer0.

My learnings from Next.js Conf

I used to think about what possibly could one learn from a conference? But after attending the Next.js very first global user conference, I’m now more than excited to attend and keep learning from such conferences. The developers have brought several jaw-dropping features in Next.js 10 such as:

• Built-in Image Component and Automatic Image Optimization: Allowing one to sit back and let next.js take care of improving the website performance by resizing, optimising, and serving images in modern formats & lazy loading them in run time.
• Automatic Resolving of `href`: Where developers won’t be needing the as` prop to configure how would their routes display in the URL bar.
• getStaticProps / getServerSideProps Fast Refresh: While editing data fetching methods, the function is re-run, and now reloading the page won’t be a requirement 🎉.

But for me, here’s ‘the’ key takeaway from the conference →

Google’s recent announcement on Evaluating page experience for a better web, according to which apart from the content, performance of websites would now be a major factor in prioritising them on google search results!

(Page experience ranking factors)

This will now push each and every developer around the globe to deliver sites with a greater user experience to stay at the top & maintain their rankings.

My Experience with Vercel (formerly Zeit) [The platform made for Next.js]

From static websites to hosting dynamic websites built with Angular, Vue & React, I’ve been using Vercel for almost everything. Maybe why I keep using it is because users get free unlimited domains to deploy on, with zero configuration required. With easy deployments from Vercel CLI, the process of deploying couldn’t get any smoother.

But with various kinds of deployments, I came to know of some issues with Vercel hosting. For the same website that I could open on my internet, I was frequently told that “The website displays an error message and doesn’t load” or “The website couldn't load”. Once in a while, such messages can be ignored but here was the deal-breaker which led me to Layer0, that I had to host an Angular SSR application which Vercel currently doesn’t support! 😲 (Shocking, right!?)

What did Layer0 have to offer?

I came to know of Layer0 at the Next.js Conf and then discovered the platform that promises instant website load, a very smooth deploying experience, all in one platform to develop, deploy, preview, run, monitor, experiment on, and defend one’s favorite frontend framework!

(CDN-as-JavaScript puts data into the browser 5 seconds before it’s needed)

“Layer0 extends the capabilities of a traditional CDN by not only hosting your static content, but also providing server-side rendering for progressive web applications as well as caching both your APIs and HTML at the network edge to provide your users with the fastest browsing experience.” ~ Layer0 Docs

How is it any different from a Content Delivery Network (CDN)?

With eCommerce sites becoming more interactive & dynamic, creating layouts from JSON that are not cached by CDNs is a factor that affects the performance of several websites being built around the world.

eCommerce websites with such CDNs result in larger First Contentful Paint(FCP) one of the core web vitals listed in Google’s recent announcement on-page experience, henceforth deteriorating the user experience. This leads to customers waiting for product data that needs to be pulled from the database even before the browser can render the page on the screen!

This meant that I could definitely host my sample Angular SSR blogging application in no time, and was very keen to test their claim of delivering sub second page load-times. 🤓

Did I even have to do a thing?

So the scenario is that I was already done developing my Angular SSR application (Github Link) and had now to deploy it via app.layer.co. I just went through their documentation for deploying Angular @ https://docs.layer0.co/guides/angular and ran these 2 commands to integrate layer0 with my existing angular project:

npm install -g [@layer0/cli](twitter.com/layer0/cli "Twitter profile for @layer0/cli")layer0 init

and was done with the integration part! Woah!

After doing a sample run via layer0 run , I tested the app locally exactly as it will be uploaded to the Layer0 cloud using serverless-offline via layer0 build && layer0 run --production and to my happiness, it worked flawlessly!

To get it running at Layer0’s edge network, I ran layer0 deploy , and Voila! I’m now the owner of most probably the fastest site in the world xD

Don’t believe me? Have a look at for yourself @ https://rishi-raj-jain-my-app-default.moovweb-edge.io/

The satisfying eXperience

I ran Google Lighthouse and believe me I was awestruck by the website’s performance. I switched from my Wi-Fi to streaming on my mobile’s data network but it continued to surprise me with just 162ms of First Contentful Paint (FCP) [basically when a user is able to process input from the webpage], estimated 0 total blocking time (TBT), and with 211.1 ms as the time when the entire DOMContent gets loaded!

(Performance Metrics of https://rishi-raj-jain-my-app-default.moovweb-edge.io/)

Conclusion

A faster website would attract more users to it. Simple, right? While this seems to be fair what if I say a second of delay would be fine. Would it be? if yes, here’s something that needs your attention:

“Amazon’s calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year. Google has calculated that by slowing its search results by just four tenths of a second they could lose 8 million searches per day–meaning they’d serve up many millions fewer online adverts.” - (KIT EATON, Fast Company)

It might be to one’s surprise, but certainly even every sub second of delay matters! Seems like Layer0 is doing a fine job in providing a better developer experience by their all-in-one platform for deployment, and a greater user experience pertaining to the fastest loads I’ve ever witnessed.