Jamstack eCommerce explained, with a handy architecture example

by Ned Hallett
Published on April 2023

Jamstack is a new and growing way to architect eCommerce websites. But how does it work, and what are the advantages?

In this piece, we’ll be looking at:

  • What Jamstack is 
  • Jamstack architecture explained 
  • The advantages of Jamstack commerce 

1. What is Jamstack? 

Jamstack is an architecture pattern that leads to faster, more secure and more scalable applications. First coined in 2015, the phrase stems from Jamstack’s three key components: javascript, API and markup.

And since then, Jamstack sites have grown extremely popular.

For traditional eCommerce platforms, Jamstack represents a major upgrade (at least for most use cases). But to understand the why, we need to delve into the what.

2. Jamstack architecture 

Part one: a page-turning metaphor, hopefully 

Jamstack can be a tricky concept to wrap your head around. But wrap we must.

So, to help us out, let’s go for a metaphor.

Although this is a little abstract, it’s actually useful to think of the difference between Jamstack and traditional applications as being that between a video game and a novel.

Hear me out.

The reason Jamstack websites are so much faster and more scaleable is that they skip a lot of the dynamic server-side functionality of traditional websites (if you’re not a techy person, you’re beginning to see why we need this metaphor).

They do this by prebuilding static files which are then interpreted (using HTML and CSS) by the user’s device.

Traditional websites, on the other hand, generate their content dynamically per user request, leading to a much heavier load on their servers.

Confused? Let’s revisit that metaphor

When a publisher produces a book, the content is static. Just words on a page. To access that immersive world, the user must read those words, and generate the world in their mind.

The content here is non-dynamic and quite simple, so the reader doesn’t have to exert that much ‘CPU’. And books are easy enough to put together.

With a videogame, however, whenever a user accesses that content, the world must be generated by the publisher (we’re saying the console is part of the publisher, for the purposes of this example). 

The content is dynamic and different for each user, which means it can’t be prebuilt. And all this heavy per-user lifting is done by the publisher, not the consumer (reader; player).

Hopefully, the above will make the below a little easier to grasp.

Part two: an example of a Jamstack eCommerce site 

Looking at the above, we can see the major elements of a Jamstack website. To explain how it all works, we’re first going to cover just the static site generator, CDN and user/static front end.

This will cover our novel metaphor. Then we’re going to add the other elements.

The first layer of an eCommerce Jamstack site, serving content 

The static site generator is what assembles the static files using HTML and markup. The CDN (content delivery network) then stores these files and sends them to the user. Because these files are static, the (much lower amount of) processing it takes to create the front end can be handled by the user’s device.

One element of this process we didn’t manage to work into our example is edge computing. This is simply another reason Jamstack is faster: the CDN will pick whichever physical server location is closest to the user to serve the files from, further cutting down latency.

This is our novel. Simple prebuilt files/books delivered to users/readers who do the interpreting themselves.

If you like, the CDN is your local bookstore.

The second layer, building the eCommerce website and eCommerce functionality

Now we’re going to address what the headless CMS and APIs are up to.

During the build stage, developers can call in content such as text and images to static files allowing them to generate that static content.

That’s mostly the role of the headless cms done, although it’s worth noting that the headless CMS can be used to modify things like product information once the site is live, which will trigger a rebuild of those static files.

To use our novel vs. video game example, the headless CMS would be something like the font used by the manual printing press.

The API, on the other hand, behaves quite differently.

For Jamstack eCommerce websites, this will be pulling in dynamic eCommerce functionality like payment gateways and authentication. However, these functionalities are provided and hosted by a third-party provider, keeping those static files nice and lean.

You can think of the headless CMS and API as externally hosted services providing dynamic functionality without intruding on the Jamstack leanness. 

To go an analogy too far, this is like…a live-streamed video game being projected onto one of the pages of Harry Potter and the Half-Blood Prince…we did our best.

3. Advantages of Jamstack eCommerce

Now we’ve covered what Jamstack is, let’s look at how this element of modern web development can make a big impact on an eCommerce platform.

Performance

eCommerce stores typically require fast load times, both for user experience and SEO. Because Jamstack sites leverage edge computing via a CDN, and because there’s less server-side processing (and less processing overall, due to the prebuilding) a Jamstack site is typically much faster.

Scalability

With high numbers of users and transactions – plus a need for seamless experiences, scaling is a number one priority for an eCommerce store. 

Horizontal scaling, stateless architecture, the use of CDNs and a lack of complexity all allow Jamstack sites to scale without breaking the bank.

Maintenance

Although not especially relevant to an eCommerce platform, cutting down on maintenance never hurt anybody.

In the vein of being generally skinny, Jamstack websites bypass maintenance needs by supplying much of the dynamic content from third-party providers, having fewer moving parts overall and doing away with traditional maintenance needs, e.g. a client-side database handling X amount of user requests per minute needs a fair bit of maintaining.

Security

Dealing with financial information and other user data always comes with an increased security need. 

On the one hand, the Jamstack approach shifts responsibility for the security of things like the payment portal onto the third-party provider.

On the other (equally positive) hand, read-only servers and fewer elements mean fewer places in your stack for bad actors to get a foothold.

Developer experience

Building eCommerce websites can be big a big drain on developer resources, especially without making use of third-party tools.

A Jamstack site cuts down on a lot of this work by enabling an API approach to integrate eCommerce functionality and having fewer moving parts in general.

Portability

Though not necessarily an eCommerce-specific issue, vendor lock-in is never nice. With simple, prebuilt files, the options for hosting are opened up.

This means you can pick, choose and move more easily when it comes to hosting and infrastructure.

How we can help

As a next-gen eCommerce managed services provider, we can support your Jamstack site or any other solution you care to name. 

We’ve delivered projects for:

  • Global appliance brand OSIM
  • No. 1 UK kitchenware supplier ProCook
  • Brooks Brothers and Anello brand distributors (among many more) Minor Lifestyle
  • European and US specialist camera equipment brand MPB

So, to talk to us about your eCommerce solution, or anything else, just get in touch. 

SHARE

CONTACT US

With partners across the USA, Europe and APAC, we provide a truly global service. So wherever you or your clients are based, contact us today to find out what we can do.