If you spend any time in eCommerce or web development circles online, you’ve probably heard the term “Jamstack” floating around the internet and you may have wondered, “What does that really mean?”
The official Jamstack.org definition states, “Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.”
The “Jam” of Jamstack is an acronym for JavaScript, APIs, and Markup. The “stack” refers to the group of technologies that are used to build web applications. Jamstack is a play on the LAMP stack (Linux, Apache, MySQL, PHP) which is a common web application architecture used for many years. It’s important to understand the differences between these two methodologies.
LAMP is one of the oldest web stacks and typically geared towards traditional website development. Because it’s been around for decades, it can be a reliable starting point for developers. However, its architecture makes it prone to performance issues on high-traffic sites.
Jamstack is the modern answer to web development issues of the past, including issues found in more rigid web stacks such as LAMP. Jamstack will almost always be the web development architecture of a headless webstore build and is a favorite among eCommerce brands for its flexibility and cohesiveness with other key tools.
Headless commerce refers to the decoupling of frontend and backend code. Jamstack is the choice stack for headless because it supports the end-user focus that’s needed for the frontend, while promoting APIs for server-side efficiency and ease.
A prerequisite for understanding how a Jamstack site is architected is the concept of a “build step.” This means when a change is needed on the site, a process occurs which builds the necessary assets. This build step can happen locally as needed, but most often occurs on the hosting platform whenever code changes are committed to the production git branch. In this way, code and content changes are deployed automatically by the build process.
This is in contrast to the LAMP stack where the underlying services are more or less “always on” and dynamically rebuilding the site for every visitor (we will talk about Jamstack site scalability in a bit).
JavaScript has undoubtedly become ubiquitous for client-side applications, and as the main programming language for the web, it is the underpinning of the Jamstack philosophy. Sites built in this way not only employ JavaScript in the frontend code itself, but during the build process as well, in order to generate the pages of your site.
It’s important to note that Jamstack itself is not a JavaScript library. Vue and React are both popular JavaScript libraries that have extra functionality provided by NuxtJS and Next.js which enable headless commerce sites. All other third-party JavaScript your site depends on will also run too, so if there are heavy dependencies, you may need to address some performance issues with them.
The data which powers a Jamstack site is provided by one or more HTTP APIs. Using APIs to source data opens up powerful doors for more streamlined and “native-feeling” integrations, with the added benefit of reducing the number of scripts the browser has to load.
Besides customer-facing integrations, APIs delivering the product data and content are leveraged during the build step, improving speed and security. Once the build process has fetched the data, it is transformed into markup for browsers to read.
Markup is the HTML code delivered to the user’s browser so the site can be displayed. In the past, building a site using JavaScript as a SPA (single page application) meant that you only rendered a container on the page, which was filled with content, once the page loaded.
However, using modern frameworks, during the build step the HTML is able to be rendered and saved ahead of time. This is oftentimes referred to as static site generation. This process leads to much greater performance and eliminates the SEO problems plagued by SPAs of the past.
Now that we have an understanding of what Jamstack is, let us talk about five key benefits of using this approach in eCommerce store development.
Building sites the Jamstack way has already been proven in the marketplace. Brands such as Peloton, Victoria Beckham Beauty, Enso Rings, and Something Navy have adopted this approach with great success, providing their customers with greater stability, performance, and security.
Enso Rings, for instance, built a new headless storefront with Nacelle, and was able to leverage the benefits of a Jamstack architecture. This included greatly improved page speed, and the ability to use a self-contained component library maintained by the brand.
Perceived and actual performance are improved through intelligent prefetching of data before the user needs it, which leads to faster page loads and app-like experiences. Transition times between pages are greatly improved thanks to client-side routing which does not reload the whole site every time a link or button is clicked.
This is a key characteristic of Jamstack. By preloading online store data and not depending on a server to get the data directly from a database every time a customer visits, the customer can find what they’re looking for and check out much faster.
Jamstack sites scale well since they are typically deployed to a Content Delivery Network (CDN), a global network of file servers designed specifically to deliver content rapidly to anywhere in the world with minimal latency. This has huge scalability benefits over a traditional origin-based server architecture where sites are dependent on one or more origin servers to handle traffic.
Something Navy (another of Nacelle’s customers) deployed their own storefront in July 2020 to solve this very problem of scalability. The brand had previously launched collections on Nordstrom.com, only to have the site crash on four separate occasions due to high traffic volumes. Since launch, Something Navy’s site has had no downtime while enjoying multiple high traffic launch days, with revenue in the millions.
Since a CDN serves a Jamstack site, there is no origin server to compromise from a security standpoint. Granted, any APIs that are used by the frontend will still need to be secure, but the likelihood of the site itself being compromised is greatly reduced thanks to the static nature of the underlying architecture.
Since the code that powers the storefront is separate from where the site is hosted, you have greater choice over your hosting provider (Netlify, Vercel, self-hosted on AWS etc).
As mentioned, building a headless commerce site has another benefit: decoupling. The backend systems which produce the data your site consumes at build time are completely separated from the frontend. This allows you to use best-of-breed APIs to power the site experiences. Headless CMS’ like Contentful, Sanity or Strapi can be utilized in tandem with headless eCommerce platforms (such as Nacelle).
Jamstack-based eCommerce stores are built using modern JavaScript and build tools. This means that developers working on them will have an improved experience over other architectures. The eCommerce market is very fragmented and inconsistent when it comes to developer experience, and Jamstack not only simplifies it, but adds layers of reassurance that developers rely on. One such layer is source control.
Using source control enables multiple developers to contribute to the site and keeps an immutable record of changes over time. This has historically been difficult with existing eCommerce solutions which depend on centralized theming systems.
Since the modern deployment platforms like Vercel and Netlify connect directly to the Git repository that houses your storefront’s source code, your site will be re-deployed automatically whenever your team makes code changes. Automated testing workflows can also be triggered before deploying to ensure your site publishes without any errors.
Did a new bug show up in production? No problem. You can deploy a previous version of the site while your team makes the update, and then roll forward without any downtime.
It is clear that Jamstack is becoming the go-to methodology for creating modern eCommerce experiences. As web technology continues to evolve, the ecosystem of tools will continue to mature and enable the next generation of developers to do even greater things.
For more information on the history of the Jamstack, you can read the O'Reilly ebook from Netlify’s co-founder, Mathias Biilmann.