The JAMStack & Headless CMS

The JAMStack refers to a new way of building websites the delivers better performance, lower cost of hosting, higher security and a better developer experience. It stands for...

Javascript (running in the browser)
APIs (for dynamic content)
Markup (prebuilt and delivered via a Content Delivery Network).

The basic idea is the frontend is a prerendered site and is completely decoupled from the backend. It’s not about any one specific technology, but more of a collection of best practices and workflows and a paradigm shift in the way of building websites.

Websites have traditionally been powered by monolithic architectures, with the frontend of the application tightly coupled to the backend. Content Management Systems like Drupal and Wordpress are very opinionated about how markup is generated and have limited flexibility, which affects not only the sites’ performance but also how efficiently they can be developed.

With the JAMStack, developers have full control over the entire frontend, giving much greater freedom, speed of development, and allows for custom-tailored UI’s built to exact specifications.

The main premise of the JAMStack is a shift away from generating the HTML at ‘request time’ (when users ask for a view), to ‘build time’ (when content is added or edited).

With traditional websites, every request made to a website requires data to be pulled from a database, rendered against a template, processed into HTML, and finally pushed across the network to the browser that requested it. This process is then repeated for each new request.

With the JAMStack, HTML is produced only when content or data changes, not every time it is requested. New modern static site generators like Gatsby and Gridsome can build SEO-friendly HTML files, and once the page has been fully loaded, the site will then ‘hydrate’ into a fully powered Single Page Application (SPA), with the benefits of extra speed and responsiveness (e.g. prefetching).

Benefits of the JAMStack are not limited to the speed, efficiency, and flexibility of engineering static HTML sites. Interactivity can be added by leveraging an ever-growing ecosystem of API-driven services. There has been an explosion of new API services designed to power just about any aspect a project may require, such as payments, search, comments, forms, etc. Many traditional platforms like Shopify now offer APIs so they can be accessed in a headless manner. This move towards microservices has resulted in the concept of cloud functions (eg AMS Lambda) where simple functions just do one thing and can be exposed as an API endpoint.

Benefits of the JAMStack

Improved Performance

Website performance is a crucial factor in the success of a project and Google now factors page load speed into its ranking algorithm. A recent study found that almost half of visitors potentially abandon a website if it takes more than 3 seconds to load. For eCommerce, studies have concluded that performance and conversion are tightly linked. One study found that a single second delay in load time can hurt the conversion of an eCommerce site by 7%.

The beauty of a site which has already been pre-generated, is that each page is ready to serve from a CDN without additional server work for each request. Nothing beats static content in speed.

Reduced Costs

The JAMstack dramatically reduces the financial costs of building and maintaining websites. Static hosting is extremely affordable (Netlify, for example, has a very generous free plan).

Enhanced Security

The reduced complexity of the JAMStack offers greatly improved security, primarily as there are no databases, servers or 3rd party plugins to deal with - reducing the number of potential cybersecurity vulnerabilities. With APIs handling all the dynamic functions, the security measures of those well-tested APIs can be leveraged.

Preferable Developer Experience

With complete control over the frontend, developers can freely create completely custom and original UIs. Deploying a static site is a very simple process and each deploy is atomic, meaning every deploy has its own preview, and can be rolled back to any previous deploy state instantly. 

Our own Example

This very own Transformative site is an example of the JAMStack. We use Drupal as a headless CMS, and its where we add our insights and case studies. The frontend is built with Gridsome, a Vue.js based static site generator, and the site is hosted on Netlify. When we add or edit content in Drupal, a webhook is triggered that then rebuilds the site in Netlify, and within a few seconds, our changes are published on the live site.

The JAMStack Ecosystem

The following is a list of JAMStack Ecosystem components with which we often work.

Static site generators

• Jekyll
• Hugo
• Eleventy
• Gatsby (React based)
• Gridsome (Vue based)

Headless CMS

‘Headless’ refers to the idea that these CMSs only manage the content, and provide that via an API.

Headless eCommerce

• Elastic Path
• Commerce Tools
• Commerce Layer
• Snipcart

Summary

Thanks for allowing us to share this information with you.  If this has stimulated a thought, a question, or a desire for a quick chat, please reach out!  We’d love to connect with you.