Headless Ecommerce

How to Choose the Right Hosting Provider for Your eCommerce Single-Page Application (SPA)

CDNs and hosting solutions have evolved over the years to become much more than just infrastructure for storing website assets. Many modern application delivery networks now offer additional features to boost developer productivity and simplify the process of deploying, previewing, experimenting on, monitoring, and running a modern frontend or single-page application.

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 Moovweb XDN. 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. 

In SPAs, the server only returns one basic HTML page with lots of JavaScript responsible for changing, or manipulating the HTML code (i.e. the DOM) dynamically in the browser. However, for security reasons,the server is still involved in the process. The client-side JavaScript code can’t connect to a database directly as this could expose sensitive data like access credentials—you can’t hide your frontend JavaScript code.

The entire UI-updating process happens in the browser (via client-side JavaScript). This provides a mobile-app-like user experience and results in speed improvement. Updates and changes happen nearly-instantly and the user doesn’t have to wait for a new page to load. Of course, your app will still need some data from time to time, so the app can show a kind of loading animation until that data has been fetched behind the scenes (e.g. via AJAX), or pre-populate elements with skeletons so that page doesn’t look empty.

Dynamically updating the entire HTML page client-side with JavaScript requires a lot of JavaScript instructions, you typically use a framework (React.js, Angular or Vue.js) or library to handle that. To compare the performance of Angular, React and Vue website read this blog post.

The Single-Page Application vs Jamstack confusion

A single-page application is a web application that loads a single static HTML page and dynamically hydrates it with new content each time the user interacts with it. Because SPAs combine static pages with JavaScript and lightweight API, the setup can be considered Jamstack (the name is a mash-up of JavaScript, APIs and Markup).  

The Jamstack vs SPA overlap is significant and a bit confusing at first glance, but there are some differences. For example, not every SPA serves content directly from the cache. In an attempt to improve SEO and performance, many modern SPAs are built on isomorphic frameworks (aka universal JavaScript), which helps them improve SERP ranking via faster site speeds by utilizing both server-side and client-side rendering. 

Because Jamstack promotes the separation of client and server-side code, it doesn’t align with isomorphic (or universal JavaScript) design—Jamstack encourages leaning on APIs for added functionality but does not recommend giving full API control over how data is consumed and interpreted. With Jamstack front loading API consumption and content ingestion is recommended at build time. If the need arises, APIs can also be made available at run time via serverless functions.

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.
  • Nuxt/Next/Gatsby and others typically ship static HTML, and once the JavaScript is loaded they transform the page into an SPA.

There are also hosting platforms out there, such as Moovweb XDN, which accomplish the same goal and even better speeds. With an application-aware CDN, Moovweb XDN 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

The biggest disadvantage of SPAs is connected with SEO. The search engines don’t understand the content beyond the empty HTML container. Some crawlers (like Google’s) are now allegedly able to interpret JavaScript and wait until the page is rendered, but since 2014 all reliable sources on JavaScript SEO keep telling you not to rely on Googlebot for JS crawling . Synchronously loading content is crawled, asynchronously loaded content is not crawled.

Performance

The initial load for SPA tends to take longer than that of static sites, because the browser needs to download a big chunk of JavaScript before anything is rendered on the screen. The code has to be parsed and executed, negatively impacting the performance of the website. However, this code also includes assets for the subsequent pages and as a result the browsing transitions of SPAs are lighting-fast. 

Some JavaScript frameworks have a way of dealing with the performance issues of SPAs. 

  • 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

Google Cloud Platform, Azure and AWS have become the bread and butter of cloud services today, and offer a very similar line-up of features. Their offerings have become commodities, as some aptly put it—each of the Big Three providers includes a CDN with PoPs around the world, serverless JavaScript and some goodies for the developers like branch previews and unlimited rollbacks. There’s not much differentiation really. For example, hosting a site on AWS will require Amazon S3 for storage of your static assets, Amazon CloudFront for the CDN, and AWS Lambda with API Gateway for the serverless functions API.

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 Moovweb XDN 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.

Schedule a 1-on-1 Demo

Learn how the Moovweb XDN can help you achieve sub-second page loads on your sCommerce single page application.

SCHEDULE A CALL NOW or SIGN UP & TEST MOOVWEB XDN

2. Netlify

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.

Developer-facing features

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

With Netlify Serverless Functions you can write JavaScript or Go APIs to perform some backend tasks and scale automatically as demand increases. While setting up AWS Lambdas on your own can be fairly complex, serverless functions in Netlify are relatively simple—they use AWS Lambda behind the scenes, but abstract it away so there is no need to touch the API Gateway, IAM role permissions, and the advanced AWS boilerplate.

Netlify free tier

Netlify also offers a virtually unlimited free tier which offers many of the benefits mentioned above.

3. Vercel

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.

4. Moovweb XDN

Moovweb XDN 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. The XDN essentially brings Jamstack to large eCommerce websites.  

Moovweb XDN comes with an application-aware CDN-as-JavaScript, which can augment or even replace your current CDN and bring all the web security features you need to the edge. XDN also comes with a bunch of dev-focused technologies that make the entire process of developing, deploying, previewing, experimenting on, monitoring and running your headless frontend simple, including automated full-stack preview URLs, a serverless JavaScript backend for frontend, advanced cache monitoring and more. 

Schedule a 1-on-1 Demo

Learn how the Moovweb XDN can help you achieve sub-second page loads on your sCommerce single page application.

SCHEDULE A CALL NOW or SIGN UP & TEST MOOVWEB XDN

Moovweb ❤ developers

Moovweb XDN makes SPA deployment instant and simple.

By combining modern SPA eCommerce frontends and a CDN-as-JavaScript with 95% cache hit ratio for dynamic content at the edge and a Node.js backend-for-frontend, the Moovweb XDN helps complex websites optimize for speed across the stack. In fact, the XDN is the only platform to guarantee median sub-second Largest Content Paint (LCP) times for large-scale eCommerce websites.

Just like Netlify and Vercel, the Moovweb XDN allows developers to use the Git workflow for development and enables continuous deployment—deploy changes after every commit using a unique URL.

Moovweb XDN 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
  • Configure edge natively in your app (CDN-as-JavaScript)
  • 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
  • Serverless JavaScript that is much easier and more reliable than AWS Lambda

What makes Moovweb XDN different from Netlify and Vercel

Netlify and Vercel focus on the static websites. They work well for smaller sites that can be static, whereas Moovweb XDN 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. Moovweb XDN, on the other hand, supports sites with millions of pages.

For complex, dynamic websites made up of thousands of pages creating "static" pages during each build not only increases the build time exponentially, but also requires builds every time there is a slightest data change. Pre-rendering won’t cut it for dynamic eCommerce websites with 1000s of SKUs, A/B tests, dynamic pricing, real-time inventory lookups, and promotions. Serverless JavaScript can handle in-line on-the-fly server-side rendered content that is consistently cached at the edge on CDN-as-JavaScript.

This is exactly where Moovweb shows its main advantage over competitive infrastructure offerings and puts the principles of dynamic Jamstack to work. The CDN-as-JavaScript service worker intelligently fetches your dynamic pages before your visitor taps on a link. Our network and monitoring tools ensure that that dynamic data is cached at least 95% of the time, shielding your database from the extra requests created by prefetching.

Moovweb XDN’s development and deployment process puts developers at the center of the process, giving them all the controls while simplifying the process of maintenance.

Moovweb XDN’s network and monitoring tools

Summary

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 Moovweb, 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—Moovweb 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 Moovweb XDN and sign up for a demo to test it for yourself.

Schedule a 1-on-1 Demo

Learn how the Moovweb XDN can help you achieve sub-second page loads on your sCommerce single page application.

SCHEDULE A CALL NOW or SIGN UP & TEST MOOVWEB XDN

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Newsletter
Get great insight from our expert team.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions

Don't wait another second. Go instant.

Get started in seconds