Jam on with Dynamic JAMstack

Throughout the past few years, there's been buzz flowing about JAMstack and the benefits it has in eCommerce web apps by serving an entire application as static files, via a CDN. For us web developers, this begs the question "If JAMstacks are static sites, does that mean you always get a static experience comprised solely of static pages"? Well, the answer is "no". 

With the rapid adoption of JAMstack among web dev, and enterprise technology companies, it is now the best time to explore the possibilities of Dynamic JAMstack eCommerce solutions.

What is JAMstack?

Before we dive into the applications, what exactly is JAMstack? JAMstack is an architectural pattern of web application development based on client-side JavaScript, reusable APIs, and prebuilt Markup. In JAMstack, JAM is an acronym comprised of 3 key elements:

JavaScript - The language used to write your web application. This includes any dependencies you may have, SDKs, frameworks, etc.

APIs - The fundamental HTTP requests transferring data to a server-side application through a particular resource. 

Markup - The look and feel of your web application's pages. These are broken up into UI templates and may be built with a static-site generator, or (in our case) dynamically assembled on page load.

Why Dynamic JAMstack for eCommerce?

Building a JAMstack will not only let merchants create unique, content-driven, fast shopping experiences, but can also reach a wider spectrum of shoppers. Providing a dynamic experience will ensure your shoppers using your JAMstack will have the latest data available to them when they need it. We can achieve this by separating static and dynamic content, so that pages will still have the performance benefits, while dynamic content is entirely loaded via the client - as such behaviour of a SPA. Accomplishing this ultimately requires a fundamental process in place to deliver the experience.

A dynamic JAMstack in an eCommerce practice works in the following pattern:

• Storefront application development & hosting are decoupled
• Storefront code changes are pushed to an SCM (Source Code Management) and hosted via static-site providers, or a service that will build/deploy/host your application like Netlify.
• Content updates are performed and served through a CDN or headless CMS 
• When the shopper browses a page, the storefront web application is requested directly by the shopper's browser from a CDN
• The storefront application loads directly within the shopper's browser, performing all the necessary requests to the eCommerce backend to retrieve data needed to populate the page (catalogue, product, account, checkout data, etc.)
• Site-level configurations necessary for the initial page load are included within the build of your storefront (API keys, available languages/currencies, external integration endpoints, etc)
• As the shopper browses your storefront, components that rely on the latest available data (pricing, search results, availability, cart/order data, etc) are updated dynamically to ensure the latest data is provided through your eCommerce APIs.
• Pages that are less frequently updated (static home page, static content pages, category landing pages) will be served as static markup within UI templates to optimize performance and maintain a componentized architecture.

In summary, when considering your next eCommerce front-end, a dynamic JAMstack can accelerate your development and maintenance of your front-end, giving merchants more time to focus on their headless eCommerce solution and build out integrations with composable commerce. When your brand has anything from a few hundred to a thousand pages, products pages that don't need as frequently regular updates as others, and the most up to date information from your APIs for pricing/inventory/etc, a dynamic JAMstack can be your best solution. 

At Elastic Path, we have open-sourced our application library offerings, and followed these same practices in developing dynamic JAMstack PWA storefronts to help our customers accelerate their time to market then build upon the benefits of composable and headless commerce. 

Click here for access to our Commerce Cloud JAMstack React PWA Reference Storefront

Click here for access to our Commerce JAMstack React PWA Reference Storefront