Jamstack for eCommerce: The Dev Perspective
January 22nd, 2021
January 22nd, 2021
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.”
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).
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.
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) which is 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 Jamstack site is served by a CDN, 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).
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.