When you’re hard at work running your store and managing your stock, maintaining a web server may not be your main focus. Not to mention hosting a SPA is a little more complex than just serving a static HTML site from a server.
Fortunately, the trend towards eCommerce SPAs has created a whole new market of all-in-one hosting and serverless backend infrastructure platforms which run web applications and static websites. Such platforms include Netlify, Vercel, AWS, Firebase and Layer0. In this post we look at how they compare in terms of fitness for hosting complex eCommerce SPAs.
How do SPAs work?
To fully understand why SPAs require special hosting treatment, you need to know how these sites are generated and what challenges are inherent in the process.
The Single-Page Application vs Jamstack confusion
Jamstack facilitates generating pre-rendered HTML sites, which offers some nice improvements compared to classical SPAs. Every page is built out as a static page during the build and these pages are easily cacheable, so the end result is that the CDN delivers your website, not your servers. This approach is cheap to host and fast as a SPA has to first make requests to display content. Popular frameworks facilitating “static” Jamstack include Nuxt.js, Next.js, Eleventy and Gatsby, although each does it a little differently.
- Eleventy ships mainly pre-generated HTML.
There are also hosting platforms out there, such as Layer0, which accomplish the same goal and even better speeds. With an application-aware CDN, Layer0 is able to cache dynamic data at the edge 95%+ of the time, thus eliminating the server in the delivery process which is almost solely on the CDN, just like in the case of a static Jamstack site. This is dynamic Jamstack.
The key challenges of SPAs
SPAs are gaining popularity mainly due to the performance improvement they offer. But the design of SPA websites, i.e. handling all the UI updates and the content rendering in the browser also leads to certain limitations.
SPAs are not great for SEO
- Next.js uses server-side rendering to “convert” the page into HTML on the server on every request. This results in longer time to first byte, but the data is always up-to-date.
- Next.js pre-renders the page into HTML on the server ahead of each request using static site generation. The HTML can be globally cached by a CDN and served instantly.
Ideally, your hosting option should come with features which can remedy the above challenges.
single-page applications, progressive web apps and accelerated mobile pages can enhance the customer experience, but website speed still remains a full-stack problem that involves the browser, edge, and server. A full stack solution is needed to truly speed up any website, SPA as well as static multi-page applications.
A highly performant hosting solution for your eCommerce SPA should offer:
- A static site generator that builds static HTML pages out of the input content, whether it’s taken from a CMS or a built-in template.
- Server-side rendering—for SPAs, server-side rendering is a bit of a hassle, but there are initiatives that make that process a bit easier (more on that below).
How to host a typical eCommerce SPA website
Below we take a closer look at the popular hosting options to consider for your SPA, and discuss how they address the typical challenges inherent to SPA websites.
1. The hosting giants: Google Cloud Platform, Azure and AWS
These services are now just the foundations upon which the new wave of intermediate providers build their services. Companies like Vercel or Netlify are essentially reselling the AWS/GCP/Azure services with a markup by adding extra features.
What makes Layer0 different from the bunch is that the platform was built from the ground up to provide the easiest, most reliable and best performing hosting for large-scale, API-based websites, such as eCommerce SPAs and travel websites.
Netflify not only fits the definition of a Jamstack setup—the company coined the phrase! In essence, Netlify is a cloud computing company that offers static Jamstack hosting solutions and serverless backend services. The deployment process is simple. This takes away the hustle of managing infrastructure, allowing the development team to focus on coding.
There is HTTP/2 standard, HTTPS, and your website is served via CDN. Netlify has a lot of features and a rich ecosystem of add-ons (e.g. Serverless functions, Instant-forms, Identity, Analytics and many others). You can also create your own add-ons.
Netlify offers solid customer support and is backed by a community of users who you can consult in case of problems.
Netlify makes efforts to make the developer’s life easier through offering some productivity-enhancing solutions.
Netlify Dev offers a productivity boost by allowing developers to locally test the site generator, API integrations, serverless functions, and edge rules, all in a single development server.
Netlify Build allows developers to use the Git workflow for development and enables continuous deployment—deploy changes after every commit using a unique URL.
Netlify Edge is a delivery network for web apps. Developers can connect it to your development workflow and make it handle complex tasks or run some custom logic. It propagates the project’s artifacts in locations across the globe, similar to a normal CDN but in a smarter and faster way.
Netlify Serverless Functions
Netlify free tier
Netlify also offers a virtually unlimited free tier which offers many of the benefits mentioned above.
Vercel (formerly Now.sh, Now or Zeit) has a similar offering to Netlify, but puts strong emphasis on zero config deployment, something they call a conventional and completely backwards-compatible approach to deployment. It works with multiple frameworks (e.g. Gatsby, Vue, Ember, Svelte). Once you upload a package.json project with a build script, you always get fully static or hybrid rendering out of the box.
Vercel provides a similar experience to Netlify, where you can connect your Git repository and reap the benefits of continuous deployment—deploy changes after every commit using a unique URL.
Vercel serverless functions
Vercel offers serverless functions, a functionality which utilizes AWS Lambda under the hood. With more languages and more regions supported, Vercel’s offering is a step up from Netlify.
Vercel also offers a robust delivery network which, apart from the static assets can also cache serverless function responses.
Even though it’s based on AWS Lambda, Vercel decided to use custom function signatures for the handler in contrast to Netlify which is using AWS’s format.
Layer0 is a complete solution for enabling dynamic Jamstack for SPA websites, making them instant loading and easier to develop for. It combines advanced optimization techniques to speed up large-scale, database-driven websites, such as eCommerce SPAs, along with powerful tools that give devs back a day a week simply by putting the code in the center of the workflow. Layer0 essentially brings Jamstack to large eCommerce websites.
Layer0 ❤ developers
Layer0 makes SPA deployment instant and simple.
Just like Netlify and Vercel, the Layer0 allows developers to use the Git workflow for development and enables continuous deployment—deploy changes after every commit using a unique URL.
Layer0 is your all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your SPA eCommerce frontend that lets you:
- Utilize Jamstack for eCommerce via both pre and just-in-time rendering
- Enable zero latency networking via prefetching of data from your product catalog APIs
- Run edge rules locally and in pre-prod
- Create preview URLs from GitHub, GitLab, or Bitbucket with every new branch and push
- Run splits at the edge for performant A/B tests, canary deploys, and personalization
What makes Layer0 different from Netlify and Vercel
Netlify and Vercel focus on the static websites. They work well for smaller sites that can be static, whereas Layer0 is geared specifically for larger, dynamic, frequently changing and more complex sites. This distinction is important especially if you’re looking for an efficient way to host your eCommerce SPA website.
What’s more, Netlify and Vercel have limitations on how many pages they can support, and their clients usually have smaller numbers of pages on average. Layer0, on the other hand, supports sites with millions of pages.
Layer0 development and deployment process puts developers at the center of the process, giving them all the controls while simplifying the process of maintenance.
Since Google’s ranking will soon focus more on user experience and page speed, running a fast site will mean significant boosts to the SEO rankings and conversions. Speeding up dynamic eCommerce websites is a challenge—but also an opportunity which, if leveraged properly, can win you a competitive advantage and a boost to your revenue.
At Layer0, we know the pain points of eCommerce operators who run dynamic SPAs, and know how to speed up these websites. We don’t just help complex, dynamic eCommerce applications achieve sub-second speeds—Layer0 was also built with speedy development in mind, and helps teams increase their velocity. Bottom-line growth and reduced DevOps costs come as secondary wins.
We do not win unless our customers do. We’ve successfully sped up dynamic eCommerce SPAs helping them secure their position in the highly competitive eCommerce landscape—check our portfolio for examples running on the Layer0 and sign up for a demo to test it for yourself.