Comment choisir le bon fournisseur d’hébergement pour votre application de commerce électronique monopage (SPA)

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 (now Edgio). 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 the inherent challenges in the process.

In SPAs, the server only returns one basic HTML page with lots of JavaScript responsible for dynamically changing or manipulating the HTML code (i.e., the DOM) in the browser. However, the server is still involved in the process for security reasons. 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 the 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 websites, 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. 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 are recommended at build time. If the need arises, serverless functions can also make APIs available at run time.

Jamstack facilitates generating pre-rendered HTML sites, which offers some 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, such as Layer0, which accomplish the same goal and even better speeds. With an application-aware CDN, Edgio can 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 a 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. Still, 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 takes longer than static sites because the browser needs to download a big chunk of JavaScript before anything is rendered on the screen. The code must be parsed and executed, negatively impacting the website’s performance. However, this code also includes assets for the subsequent pages and as a result, the browsing transitions of SPAs are lightning-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 takes a long time to the 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 have features that remedy the above challenges.

single-page applications, progressive web apps and accelerated mobile pages can enhance the customer experience. However, website speed remains a full-stack problem involving the browser, edge, and server. A full-stack solution is needed to speed up any website, SPA, and 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 some initiatives 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 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 worldwide, serverless JavaScript and some goodies for the developers like branch previews and unlimited rollbacks. There’s not much differentiation. 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 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.

2. Netlify

Netflify fits the definition of a Jamstack setup—the company coined the phrase! Netlify is a cloud computing company offering static Jamstack hosting solutions and serverless backend services. The deployment process is simple. This removes 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 many 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 simplify the developer’s life by 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 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 strongly emphasizes zero config deployment, which they call a conventional and completely backward-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 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, which utilize AWS Lambda under the hood. With more languages and regions supported, Vercel’s offering is a step from Netlify.

Vercel also offers a robust delivery network that can cache serverless function responses apart from the static assets.

Even though it’s based on AWS Lambda, Vercel decided to use custom function signatures for the handler in contrast to Netlify, which uses AWS’s format.

4. Layer0 (Edgio)

Layer0 (Edgio) is a complete solution for enabling dynamic Jamstack for SPA websites, making them instant loading and easier to develop. 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. Edgio essentially brings Jamstack to large eCommerce websites.

Edgio 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. Layer0 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.

Layer0 ❤ developers

Edgio 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 Edgio helps complex websites optimize for speed across the stack. Layer0 (now Edgio) is the only platform to guarantee median sub-second Largest Content Paint (LCP) times for large-scale eCommerce websites.

Like Netlify and Vercel, Layer0 (now Edgio) allows developers to use the Git workflow for development and enables continuous deployment—deploy changes after every commit using a unique URL.

Edgio 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 Layer0 different from Netlify and Vercel

Netlify and Vercel focus on static websites. They work well for smaller sites that can be static, whereas Edgio 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 fewer pages on average. Edgio, 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 increases the build time exponentially and requires builds every time there is the 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 consistently cached at the edge of CDN-as-JavaScript.

This is exactly where Edgio 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 dynamic data is cached at least 95% of the time, shielding your database from the extra requests created by prefetching.

Edgio development and deployment process put developers at the center of the process, giving them all the controls while simplifying the maintenance process.