Headless architecture

A headless platform can be broken down into two parts:

1. The CMS where content authors can manage website content through an editor interface; and

2. The site builder, which is comprised of a front-end framework (such as Next.js, Gatsby, and Nuxt.js), component library, and page template.

Here's an overview of how it works:

Authors input content into the CMS; the site builder retrieves content from the CMS, in the form of JSON, and builds the front-end UI; and the distribution platform stores the bundled code and serves content to the end users.

Let's look at the CMS and site builder in greater detail.

Headless CMS

A headless CMS stores content for a website and provides access to users and applications. Examples include Contentful and Sanity.

The diagram below illustrates some of the important pieces that comprise a headless CMS.

An editor interface allows authors to edit content in the CMS, as well as access other assets and third-party integrations.

Using page preview, authors can review unpublished pages and changes in the application.

Applications and developers access the content stored in a headless CMS via APIs.

Third-party services and data can be integrated into the CMS. This can include e-commerce data from Shopify, as well as digital assets, such as images and videos, from Cloudinary, Bynder, and other digital asset management (DAM) platforms.

Site builder

A site builder is built on a front-end framework and constructs pages using data from the CMS.

This is essentially how a site builder works:

We use a CMS client software development kit (SDK) to transform raw JSON data from the CMS to Javascript objects that are easier to work with. Every headless CMS provides a client SDK: an npm package containing functions to request data in a variety of ways.

With the transformed data, we use a page template to compile what will be viewed by end users on a site. (We'll cover exactly how we turn data and components into pages in a later section).

The resulting bundled code is what's used to deploy the production application with all the pages for the website.

Distribution platform

A distribution platform is a system that takes the bundled code (generated by a site builder) and makes them available to end users on their browsers. This is typically achieved by publishing the code and assets to a space where they can be accessed publicly.

Bundled code contains what's necessary to run the application: compiled code and static assets. Static assets that are core to the application include, for example, fonts, icons, images, and generated resource files.

Using a content delivery network (CDN) can improve the performance and speed of the application. Because a CDN can cache static assets in multiple servers globally, it can deliver them to end users from a server closest to their geographic location.

The application will likely still have integrations with third-party services and hosted asset services to provide additional data that couldn’t be compiled by the site builder.

We illustrate below how distribution platforms deliver dynamic content to end users.