# 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:

<figure><img src="https://882838265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq7UE1cAwz12WuyrFSyXF%2Fuploads%2FoMTGWo4Ba5lciSLxrRGD%2F2a_headless_sitebuilder_distribution%20(2).png?alt=media&#x26;token=315cad3c-16d1-4cec-8c2b-27273d454be7" alt=""><figcaption><p>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. </p></figcaption></figure>

Let's look at the CMS and site builder in greater detail.&#x20;

## Headless CMS

A headless CMS stores content for a website and provides access to users and applications. Examples include [Contentful](https://www.contentful.com/) and [Sanity](https://www.sanity.io/).

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

<figure><img src="https://882838265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq7UE1cAwz12WuyrFSyXF%2Fuploads%2FNVupPyerM0d874O71i9c%2F2b_headless_important_pieces%20(1).png?alt=media&#x26;token=9d3d25be-ec77-48d4-8b8d-5d497e7dea00" alt=""><figcaption></figcaption></figure>

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.&#x20;

## 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:

<figure><img src="https://882838265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq7UE1cAwz12WuyrFSyXF%2Fuploads%2FbsyyNclcj9379n1IvoDv%2F2c_site_builder.png?alt=media&#x26;token=6852c7df-d295-4ba1-8d1f-2ba1620223b3" alt=""><figcaption></figcaption></figure>

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.&#x20;

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](https://tbw.rangle.io/headless-cms-playbook/static-site-generators/how-to-connect-content-data-to-front-end-components)).

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

## 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.&#x20;

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.

<figure><img src="https://882838265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq7UE1cAwz12WuyrFSyXF%2Fuploads%2F3pYN45JowRdiM1DvawLW%2F2d_distrubution%20platform%20(1).png?alt=media&#x26;token=b3e1a848-2fe5-4b74-abb5-4473e0eda3bc" alt=""><figcaption></figcaption></figure>