Jamstack for ecommerce: hype or must-have?

Promising better web performance, easier scaling, and enhanced security, the Jamstack architecture enjoys rapid adoption. According to HTTP Archive, the share of Jamstack websites has grown from 0.38% in 2019 to 1.11% in 2021. The traction is confirmed by the recent series of important investment rounds for technology providers in the ecosystem, with multi-billion valuations for Netlify and Vercel. Meanwhile, detractors qualify Jamstack as a buzz-word for a mere rebranding of the concepts of static websites.

What’s the Jamstack?

Before digging into the subject, let’s first decode what the JAMstack acronym stands for:

J for (client-side) JavaScript A for (reusable) APIs M for (prebuilt) Markup

The combination of these three components is able to deliver a perfectly functional but (mostly) static website. For example, in the ecommerce context, this could mean loading a static page with product photos and descriptions, combined with APIs that manage checkout and payment.

By now the consensus spelling has evolved from the original “JAMstack” to a more generic “Jamstack”. The latter is meant to designate a broader development pattern rather than some specific technical ingredients.

The approach can be described as follows:

The pages are compiled in advance, with all the necessary HTML, CSS, and Javascript files served via a CDN. Conversely, the “traditional” server-side website architecture implies dynamic rendering of the HTML file upon each user’s request. The frontend is decoupled from the backend and databases. Javascript and APIs are used to link the frontend to the backend and enable the interactions with the user

As you can see from the diagram below, the Jamstack architecture is more streamlined than the traditional one:

The building blocks necessary to create a Jamstack website are:

• a hosting and deployment platform (Netlify, Vercel, AWS, Firebase)
• a headless CMS (Contentful, Strappy, Sanity, Fabric, Sylius, Magnolia, Agility, Contestack - and many others)
• a Static Site Generator (Gatsby, Nuxt.js, Hugo, Eleventy, Jekyll)
• a frontend framework (React, Vue.js, Svete, Angular)
• API-based microservices (Auth0, Disqus, Algolia, Optimizely, TwicPics, headless commerce modules, etc).

The infographic here gives a good first impression of the API services of the Jamstack ecosystem.

The main advantages of the Jamstack architecture

Web performance

Compared to the traditional website architecture, the Jamstack websites avoid the delays of dynamic rendering of the HTML file as well as the complex chain of operations between the browser, the server, and the database upon each user’s request. Moreover, serving the pre-built flat HTML files from a CDN provides an additional boost to page load speed.

How does this theory translate into practice? A case study of migration to Jamstack architecture witnessed a 200% increase in mobile page load speed, accompanied by the improvement of Google Lighthouse optimization score from 52 to 100.

Scalability and cost efficiency

The Jamstack is a great way to build websites that are both easy and cost-effective to scale. On the one hand, splitting the website into a modular architecture with decoupled frontend and backend encourages using microservices which are easier to scale. On the other hand, the fact that the frontend is built in advance makes the server load much less dependent on the number of simultaneous visitors. Finally, the content delivery networks used to serve static-first pages are particularly optimized to absorb any load peaks.

Since most infrastructure costs are typically driven by the need to reserve capacity for load spikes, the lower load variance under Jamstack architecture brings a significant reduction in expenses for high-traffic websites.

Developer experience

The Jamstack approach relies on reusable APIs, letting the developers avoid “reinventing the wheel” and delegate responsibilities to best-of-breed microservices. The simplified infrastructure of the architecture also means a lower maintenance workload. As a result, Jamstack is associated with excellent developer experience and faster time-to-market.

Security

Jamstack architecture is advantageous from a security standpoint. As static websites in general, Jamstack websites don’t feature any user’s connections to the website’s server or database. This eliminates the most vulnerable potential point of attack. The attack surface is narrowed down to the API-based services. Moreover, the well-implemented Jamstack setups have the services decoupled from one another. Consequently, the underlying infrastructure can remain safe even when one of the external APIs gets compromised.

Limitations of the Jamstack architecture

As the saying goes, there is always a catch, and Jamstack is no exception. Its static-first nature imposes significant constraints:

• The need to rely on third-party services (or custom developed back-end functions) for any dynamic feature. As the Jamstack detractors put it, this “delegates the responsibility on someone else’s backend”. This isn’t stringent for simple use cases, like portfolio websites or blogs. Incorporating comments or basic user authorization is rather straightforward. However, when it comes to web apps with lots of interactivity, the complexity might grow exponentially.
• The build process takes noticeable time. This makes Jamstack hardly compatible with some use cases requiring ultra-frequent updates. The problem is partly solved with incremental builds or modern server-side and hybrid rendering patterns. The count could still go from seconds for small projects to several minutes for larger ecommerce websites with thousands of pages.
• Jamstack websites might be more difficult to edit for non-technical contributors (think of marketers, content authors, or small business owners). Jamstack comes without a live preview out of the box - although workarounds exist.

Is Jamstack suitable for ecommerce websites?

Depending on the size and complexity of an ecommerce website, Jamstack architecture could be a perfect fit or an unnecessary burden. Its excellent web performance and time-to-market mark valuable points. On the other hand, the caveats described in the previous section should also be taken into account. Implementation of A/B testing, personalization, and dynamic content on landing pages stay feasible but require some additional efforts.

Overall, Jamstack is an attractive option for dynamic medium-sized companies looking to build fast and composable ecommerce. As of 2022, none of the world’s biggest brands has followed the classic Jamstack pattern for an ecommerce project (in sharp contrast with many of their institutional websites and promotional mini-sites). At the other end of the spectrum, the smallest ecommerce websites might get held back by Jamstack’s steep learning curve.

According to the 2021 Jamstack community survey, ecommerce is the third most popular use case of this architecture, right after personal blogs and B2B portfolio websites.

Here are several notable examples of Jamstack ecommerce websites and the technologies behind them:

• Biomarkt.de: React + Gatsby + Tailwind CSS + CMS Sanity + CommerceLayer
• Butcherbox: React + Gatsby + Nettlify + Contentful
• Jeanscentre: React + Gatsby + CMS Prismic + CommerceLayer + Cloudinary + Freshchat
• Gobi Cachmere: React + Next.js + Netlify + Tailwind CSS + Shopify Plus
• Mr Beast: Merch Shop React + Next.js + Vercel + Shopify Plus
• Tediber: NuxtJS + Vue.js + Netlify + Sylius
• Urban Armor: React + Gatsby + Netlify + Contentful + Shopify Plus
• Victoria Beckham: Beauty Vue.js + Gridsome + Netlify + Contentful + Shopify Plus

Concluding remarks

By today, Jamstack is an attractive option for certain ecommerce contexts. The development of the Jamstack ecosystem tends to attenuate all of this architecture's limitations. Jamstack is now compatible with WYSIWYG-editing, ultra-frequent updates, or extra-large projects. In a way, hybrid rendering and other advanced techniques erode the very division between Jamstack and traditional architectures. It becomes possible to combine the best of both approaches. This could promote the pattern’s static-first approach to the best practices of ecommerce — but also make the term “Jamstack” obsolete.