The Jamstack and Headless CMS

Before we get started it is worth adding a disclaimer. The following article is designed to help marketing leaders (rather than technology leaders) understand the concept of ‘the Jamstack’. I have thus sought to try and explain in a way that strips out much of the technical jargon, developers would expect to see referenced in it. 

So what is “the Jamstack”?

The Jamstack is a widely used cloud-native web development architecture for building modern websites including B2B and SaaS websites. The phrase was initially coined by Matt Biilmann of Netlify in 2015 and stands for:

• JavaScript (running in a browser), 

• API (dynamic content), and 

• Markup (prebuilt, generated by a static site generator and delivered via a CDN)

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. Jamstack removes the need for business logic to dictate the web experience. It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

—Source: Jamstack.org

In short, it represents an increasingly popular way of developing websites and offers a significant number of benefits, particularly concerning performance improvements that help account for its success.

In Jamstack websites, the application logic typically resides on the client side (for example, an embedded e-commerce checkout service that interacts with pre-rendered static content), without being tightly coupled to a backend server. Jamstack sites are usually served with a Git-based or headless CMS.

—Source: Wikipedia

Its popularity also coincides with the emergence of an API-driven ecosystem where various applications ranging from shopping carts to website optimization applications plug in directly via the browser or the back-end e.g. Stripe, Optimizely, AuthO, Shopify, PayPal, and Intercom to name a few well-known applications.

Today, there are over 1 million developers deploying Jamstack sites to Netlify, and thousands of enterprise teams building on the Jamstack for its benefits in site speed, security, and ease of development.

—Source: Charlotte Dillon, Netlify

The way we have built and managed websites has evolved over the years since 1989 when the British CERN computer scientist Tim Berners-Lee first “invented the World Wide Web”. This evolution is due in part to design improvements, increased broadband speeds, more sophisticated website builds, improvements to the underlying infrastructure and the explosion of content (and therefore pages).

For the past decade or two, web pages have generally been rendered on-demand. When you visit a site, your computer (the client) requests a resource from another computer (the server). The server gathers all the stuff required to display that resource, arranges it in a nice readable template and serves it back to you. This approach relies on monolithic software. This means that most (if not all) of the data, logic, and presentation is handled in one place – usually a CMS such as WordPress. Systems like this trend towards bloat and can become difficult to maintain, time-consuming to work on, and susceptible to bugs.

—Source: Dave Seaton

An example of one key element of this evolution was the emergence of Content Delivery Networks (CDN’s), geographically dispersed servers, designed to help manage content distribution at pace, which suited the needs of SaaS companies where addressable markets were not limited to local ones. These represent a key element of the Jamstack approach.

CDN’s are a distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy and also improve delivery performance as a result of servicing requests from the infrastructure closest to the user making the request.

—Source: Jamstack.org

As the internet matured and websites grew in sophistication (and importance), things started getting more complicated and the “Old Stack” started running into problems:

• Security Issues - 70% of WordPress (the most popular website builder) installations are vulnerable to hacks

• Reliability Issues - becomes more complex with more moving parts

• Performance Issues - slow website/SEO impact/conversion rate impact

The emergence of the Jamstack was in response to some of these issues and consisted of 4 key elements which enabled developers to integrate their favorite technologies to create a full-stack application.

1- Decouple Building and Hosting

Decoupling relates to the process of separating systems or services completely. This makes it easy to switch services in and out as needed and to source specialist third parties apps for non-core site functionality. You can thus leverage best-of-breed apps for everything, like identity and access management (IAM), payments, chatbots, and content management. In short, you are using APIs to consume dynamic elements.

2- Decouple FrontEnd and BackEnd

Developers don't have to be concerned with the back-end infrastructure anymore as they can simply concentrate on what happens within the browser. This represents a classic division of labor freeing them to focus almost exclusively on the site design, look and feel, and performance, choosing their favorite tools and solutions, and enabling marketing teams to focus on content creation, distribution and management.

3- APIs rather than Databases

Unlike a conventional site builder, a Jamstack site separates the code (JavaScript), the site infrastructure (APIs), and the content. The management of these three components is therefore done in a decoupled architecture with a distinct server-side and client-side separation.

4- Pre-Render the MarkUp and Enhance it with JavaStack

The browser is no longer just a document viewer, but more of an operating system as the entire front end is prebuilt into static pages served directly from a CDN. The speed of the site will thus increase and Core Web Vitals are improved as you “pre-bake” more.

So what are some of the key benefits of the Jamstack approach to web development? 

1- Enhanced Security 

First of all, once you decouple the hosting infrastructure and “the build” you reduce the surface area for attacks and there is no way for someone to inject something into your build process that would cause a security issue. Relying on APIs provided by different commercial vendors means each of the various applications will have dedicated teams securing their respective solutions. In short, because there are no databases, servers or 3rd party plugins to deal with, Jamstack websites are extremely secure.

2- Reduced Maintenance Costs 

You can host everything on a CDN and thus don’t have to worry about scaling your back-end with expensive servers. Sites can be cached in a CDN which reduces complexity and cost. In short, the costs of maintenance are reduced when websites are developed and deployed utilizing the Jamstack architecture as using static HTML files is a substantially less expensive approach.

3- Unbeatable Speed 

The Jamstack architecture can dramatically improve site speed with the knock on benefits in terms of SEO, and conversion rates. In fact, this is one of the key benefits resulting from its use. Nothing beats static content for fast websites.

When it comes to minimizing the time-to-first-byte, nothing beats pre-built files served over a CDN. Netlify Edge, for example, makes this possible with its global distribution with automated prerendering across multiple cloud providers.

—Source: Charlotte Dillon, Netlify

4- Avoid Vendor Lock-In

An additional benefit of utilizing a Jamstack led approach is that you have more flexibility as to the providers you chose so you can minimize vendor lock-in and benefit from reduced switching costs.

Sites are pre-generated and thus any simple static hosting provider will be able to manage a Jamstack site.

5- Greater Access to Developers

Jamstack sites are built using widely available technologies and an approach familiar to a growing number of front-end developers. As a result, it is relatively easy to hire developers leading to faster development and competitive day rates. 

Developers can choose what tools and frameworks they want to use themselves and APIs offer greater functionality without the unwanted burden of additional maintenance. 

6- Scalability & Reduced Risk

Through the use of caching, a Jamstack approach assists in managing traffic peaks and high website loads through the use of CDNs. This helps to minimize application failure points and lowers the likelihood and frequency of downtime.

7- Improved Performance

Page loading speeds affect user experience and conversion rates. Jamstack sites produce pages in advance during a build by pre-rendering the content, thus eliminating the need to generate page views on a server at the time of the request. Strong site performance is thus attainable without deploying expensive infrastructure because all the pages are already available and prepared to serve on a CDN geographically located close to the user. 

Pre-rendering facilitates scaling while enhancing site performance, helping with uptime metrics, and also leading to healthy Core Web Vitals (Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS)).

While Jamstack websites don’t have to utilize a Headless CMS (Headless Content Management System) [What is a Headless CMS?] it is an increasingly popular route.

Developers have the freedom to use their preferred Jamstack frontend framework to create a website accessing the content via an API, and this flexibility represents a key benefit as to why developers choose a Headless CMS (like Contento), on the Jamstack.

The Jamstack is an increasingly popular architecture amongst developers, resulting in an ever growing number of Jamstack sites being built, and more developers learning Jamstack. It is viewed as a modern approach to web development, and in the past seven years, since it first started to emerge, it is being used to build a growing number of static websites accompanied by Headless CMSs. It is also in part a response to the decline in the popularity of WordPress in recent years as evidenced by the numbers migrating off WordPress.

The overall leader in the CMS space remains WordPress, as it has been for many years. However, with a satisfaction score of just 0.5, unenthusiastic users of WordPress outnumber enthusiastic ones 2-to-1, and WordPress has lost usage share over the course of our surveys.

—Source: Jamstack Survey 2022

 With the Jamstack, developers have complete control over the entire frontend, allowing for far greater freedom, faster development, and the use of custom-tailored UI’s that are specifically tailored to their needs. In short, the Jamstack represents an increasingly attractive architecture for those looking to build modern websites using a Headless CMS (like Contento).