The Jamstack: licking the spoon of headless web development

Posted on 05/07/2021 by Dave Seaton

Headless web development sadly doesn't actually have anything to do with jam...

So what is it? seems as good a place to start as any:

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

Sounds good so far, but let’s break things down a bit.

The term “Jamstack” is derived from the acronym JAM – Javascript, APIs, and Markup – an increasingly popular “technology stack” used to build websites (it’s actually not really a complete tech stack but let’s not worry too much about that).

Javascript is the language used to craft Jamstack sites. Using a modern component-based framework (such as React, Vue, or Angular), data is pulled from multiple sources via APIs. These APIs expose data from a CMS, form manager, search tool, events service, image hosting or other online services. These ingredients are combined to produce Markup, ready to be consumed by users worldwide.

Getting into a jam

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.

Traditional server side rendered website

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. This is part of the reason complete rebuilds are necessary every few years.

Many popular systems have evolved to be more extendable and flexible (with theme and plugin ecosystems). But this is just kicking the can down the road. Just ask any developer who’s had to maintain a plugin-laden CMS for a few years and note the thousand-yard stare.

Dog Flashback GIF

By contrast, Jamstack sites adopt a headless approach. Instead of handling the head (the user-facing bits) in the CMS, it becomes a completely separate entity with data pulled from multiple sources – a process known as decoupling. These elements are then combined into highly optimised pre-rendered files.

Shiny new statically generated website

Super sweet

  • Decoupling means that the services used (or even the site itself) can be swapped out with relative ease as business needs change. Those same services can also be used across multiple websites and apps if necessary. This benefits content creators and developers.
  • Pre-rendering means that the entire site can be served statically from a Content Delivery Network (CDN), which boils down to being extremely fast – a dream for the user experience and SEO crews.
  • Since the site is served statically, there are fewer opportunities for cyberattacks such as SQL injection.
  • The Jamstack approach benefits from modern development tools, fully embracing the seismic shift to Javascript and frameworks supported by companies like Google and Facebook.
  • You won’t be short of options either – there are lots of headless CMS and static site generators at this point as Jamstack spreads, and just about every serious web service provides some kind of API.
  • Some traditional CMS (such as WordPress) also provide APIs to expose their content, so some of your needs might already be catered for!

Sticking points

  • It requires a significant investment in time and skills if you don’t already have the knowledge and resources available.
  • With traditional CMS, a lot of common website features (e.g. SEO best practices, user login) are provided OOTB. Although Jamstack (and headless approaches in general) grant greater freedom, there’s a certain amount of redundant effort in resolving these problems in a new context.
  • There aren’t as many support resources as there are for more established technologies. Nothing insurmountable, but it can extend the time taken to solve problems.
  • More data services means more things to go wrong! This means more work upfront to select reliable data services and implement them in a robust way.
  • There are some problems specific to the Jamstack space. For example, when you update content in your CMS it isn’t available until the site is built again, so you need to find a way to trigger a site build based on updates – potentially an issue on larger sites, where full builds can take some time to complete. One solution to this is atomic deployment as provided by hosts such as Netlify.

So what now?

The best way to get started with Jamstack is to get stuck in! is a great starting resource with curated lists of frameworks and CMS options. You should also check if your current CMS of choice provides an API that a Jamstack site can leverage.

You’ll also need to consider hosting – there are a few options for this ranging from generalised hosting to hosting optimised for Jamstack. Other specialist hosting companies are increasingly providing support, one example being  WPEngine with their hotly anticipated Atlas solution.

There’s a lot to love about the Jamstack architecture, and some clear benefits to be gained if you can handle the hurdles. It’s also a compelling option if you practice continuous improvement paradigms such as Growth Driven Design.

If you have any questions, feel free to get in touch with a member of our Web Development team.

If you need help with your Technical Web Development don't hesitate to contact us.

Enjoy this article?

Subscribe for weekly insights

The Jamstack: licking the spoon of headless web development

Let’s thrive together

Get in touch to take the first step.

Contact us