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.
The Single-Page Application vs. Jamstack confusion
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.
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
- 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
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.
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.
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
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 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.
Layer0 ❤ developers
Edgio makes SPA deployment instant and simple.
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
- 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 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.
Edgio development and deployment process put developers at the center of the process, giving them all the controls while simplifying the maintenance process.
Layer0 network and monitoring tools
Since Google’s ranking will soon focus more on user experience and page speed, running a fast site will significantly boost the SEO rankings and conversions. Speeding up dynamic eCommerce websites is a challenge—but also an opportunity that, if leveraged properly, can win you a competitive advantage and boost your revenue.
At Layer0 (Edgio), 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—Edgio was also built with speedy development and helped 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 Edgio.