Headless CMS and the Jamstack, Explained
Charlotte Dillon, Netlify
2021-08-31
The term “Jamstack” was coined by Netlify co-founder and CEO Matt Biilmann in 2015 to describe the new way teams are building for the web: an approach that includes tools like headless CMSs and has a decoupled architecture. Since then, the Jamstack ecosystem has grown and evolved to an industry-wide movement representing the modern architecture that developers are adopting to build even better web experiences. 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.
In this post, we’ll cover what the Jamstack is, where headless CMSs like Bloomreach fit in, and how they’re helping build web experiences consumers love.
What is the Jamstack?
Jamstack is a way of thinking about how to build for the web. The UI is compiled, the frontend is decoupled, and data is pulled in as needed.
The “Jam” in Jamstack is derived from its three components: JavaScript, APIs, and Markup. These components are used to deliver super fast, secure, and SEO-friendly sites. Jamstacks are used to compile a frontend and serve static assets at the edge. Any additional data is pulled in as needed via APIs. This way of developing (a method that leverages the ever-expanding capabilities of browsers and devices, and doesn’t require managing your own servers, CDN, or load balancers) didn’t used to be possible. But with browser APIs and JavaScript runtimes maturing, and SPA frameworks like Angular and React on the rise, this architecture has become invaluable. It’s finally made it viable to deliver rich interactions with client-side JavaScript, which enhance experiences with custom logic and secure calls to APIs.
There are two core principles behind the Jamstack: pre-rendering and decoupling. Let’s review those two concepts before we talk about where headless CMSs fit in:
Pre-rendering
With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites that can be served directly from a CDN, reducing the cost, complexity, and risk of dynamic servers as critical infrastructure.
With so many popular tools for generating static sites, like Gatsby, Hugo, Jekyll, Eleventy, Next.js, and many more, many web developers are already familiar with the tools needed to become productive Jamstack developers.
Pre-rendering leads to improvements in site performance, uptime metrics, and Core Web Vitals, and also makes it easy to scale.
Decoupling
Decoupling is the process of creating a clean separation between systems or services. By decoupling the services needed to operate a site, like the CMS and the backend, or the database and the frontend, it becomes easy to swap services in and out as you see fit, and to use specialized third parties instead of homegrown applications for all site functionality.
The thriving API economy has become a significant enabler for Jamstack sites. The ability to leverage domain experts who offer their products and services via APIs has allowed teams to build far more complex applications than if they were to take on the risk and burden of such capabilities themselves. We can leverage best-of-breed tools for things like authentication and identity, payments, data services, search, and yes, content management.
Enter the headless CMS.
What is a Headless CMS?
A headless CMS is a content management system that is decoupled from the work of returning and managing the views and page templates to the site's visitors. Unlike a traditional or ‘coupled’ architecture (where the backend is deeply integrated with the frontend) in a headless CMS, frontend and backend are completely separate systems. The term “headless” comes from the uncoupling of the “head” (the front end) and the body (the back end). The CMS can focus on creating rich, powerful content authoring and editorial management workflows, without being weighed down or overly complicated because they’re tied into presentation concerns.
Although it’s an extremely common pattern, Jamstack sites don’t always have a headless CMS. Some teams choose to update content directly in markdown files, using the JavaScript framework of their choice. But for many Jamstack users, the ability to pick and choose a headless CMS that works for your team is one of the primary benefits.
Why Choose a Headless CMS + Jamstack?
There are lots of benefits to a headless approach. Bloomreach covers all of them in their guide to everything you need to know about Headless CMSs. Let’s cover some of the main benefits of choosing a CMS on a Jamstack architecture.
► Better Content Editing and Development Workflows: Not only does a Jamstack approach decouple the frontend from the backend, it helps teams decouple their workflows. With an all-in-one platform, any content changes to the site need to be reviewed and deployed by a webmaster. With a CMS like Bloomreach, content editors can make changes as they please, and developers can easily deploy to Netlify with Git-based workflows.
► Better Performance: Jamstack sites are incredibly performant. The significant work done by frontend developers to deliver great performance can be undermined when it is either inefficiently rendered on servers at request time, or compromised by a tightly coupled, opinionated backend. Instead of waiting for pages to build on the fly, Jamstack sites generate at deploy time. 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.
► Higher Security: With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.
► Cheaper, Easier Scaling: When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. Supercharged Content Delivery Networks like Netlify Edge are perfect for this.
► Collaborative Workflows: Web development is a team sport. Jamstack is Git-based, and with collaborative tools and integrations with popular project management tools, Jamstack teams can create a tight feedback loop that works with developers’ workflows. Important details are less likely to get lost, and everybody wins.
These features have upsides in all industries, but we’ve been witnessing an especially large increase in headless approaches in e-commerce, sometimes referred to as headless commerce.
Another main benefit of Jamstack is the community. With an ever-widening ecosystem and partners like Bloomreach, the Jamstack continues to grow and evolve. Ready to join us and start building customer-centric web experiences that are easy to use for your whole team? Join us on the Jamstack Slack community, or at our upcoming Jamstack conference.
