Skip to main content
More in Learn

Jamstack Architecture

JAMstack is an abbreviation for JavaScript, API, and Markup as developer’s stack. In recent times the term outgrew itself and what it stands for today is very different from what the term refers to.

Most would agree that today, Jamstack refers to a web dev architecture that emphasizes decoupling of the frontend and the backend, content pre-rendering (at least for most of the content), use of CDNs, and use of APIs and serverless functions for the content enhancement.

JAMStack

With the Jamstack websites, the tangible assets are pre-rendered static files (like content from headless CMS or headless commerce, for example) deployed on CDN. At the same time, the dynamic side of things is handled with API calls at run time (dynamic content like forms, search, or authentication, for example).

JAMstack or Jamstack?

It depends on who you ask (it is an ongoing discussion). Technology and language around it evolved thanks to greater adoption and a larger ecosystem. We use the term Jamstack to differentiate today’s widespread meaning from the original concept.

Why Jamstack?

Performance, security, scalability, and better developer experience. The fastest way to deliver web content to the end-users is with static files. Jamstack approach ensures exactly that thanks to static files served via CDNs for unmatched page loading times.

Static assets and clear separation of services maintained by 3rd party providers (think of one service for the content, one for search, one for payment, etc.) make it much harder to find individual vulnerabilities.

This also allows developers to spend less time on maintenance issues and focus on building a compelling front-end user experience.

Finally, the ability to bring your own frontend and decide on backend solutions that best fit your use case, and with static files as main assets, easier scaling is guaranteed.

For most businesses, all of these benefits are easily translated into operational and development cost savings.

How to Jamstack?

With Jamstack, it’s all about the tools you use. You can use one of the JavaScript frameworks (like React, Vue, or Angular) or one of the static site generators (like Gatsby, Next js, Hugo, Gridsome, etc.) to build the front end for your project.

The content is managed with headless CMS or headless commerce solutions while the problems or specific website requests are handled with cloud services via an API (like forms, search, login, payment, etc.).

Finally, modern-day hosting and deployment platforms (like Vercel, Netlify, Cloudflare Pages, etc.) are there to provide you with a home for your project.

While one of the most significant benefits of using Jamstack is mixing and matching tools, the sheer volume of available tools in the space can be overwhelming at times.

Jamstack Adoption

Thanks to the benefits it brings out-of-the-box Jamstack and the use of React static site generators and others, is on the rise. SSG adoption is growing in general by 2x year over year according to the most recent Web Almanac 2021 report.

Jamstack and eCommerce

Taking a Jamstack eCommerce approach allows you to generate super-fast pre-generated markup. JavaScript and product information from the Crystallize PIM API using React to pre-hydrate SSR pages delivered on edge is ideal for high performance and easy scalability.

For your customers, that means fast performance and better UX overall. For your business, that means higher click-through rates (revenue) and better search engine ranking.

Jamstack eCommerce Examples With Crystallize

To get you going easier and faster with your business, we’ve made the following Jamstack ecommerce boilerplates.

Next JS Jamstack eCommerce

Our open-source Jamstack eCommerce Boilerplate with Next JS delivers a Jamstack strategy for eCommerce with rich marketing content. Pre hydrated, or pre-generated, SSR pages are delivered directly from the edge. Vercel is used as a serverless hosting and CDN service to enable a full Jamstack approach.

JAMStack eCommerce boilerplate

Gatsby JS Jamstack eCommerce

Our open-source Gatsby Jamstack boilerplate delivers a Jamstack strategy using Gatsby for hosting. Gatsby can also be hosted on other CDNs.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community