Skip to main content
More in Learn

Headless Architecture

Headless architectures enable a decoupled approach to web and app development. This allows content and services to be shared across channels or heads. With a proper headless architecture you can also build a centralized repository of re-usable services within your organization.

Headless Architecture

The concept

A headless architecture typically consists of three layers; headless services, service API and channel head. The core concept is to decouple the backend services like PIMeCommerceCMS, Payment and Authentication from the frontend. To glue the heads together, a layer of shared internal services is added that handles syncing between the stack services, as well as operations, such as authentication, order intake or payment.

The benefits of this type of architecture are:

  • Freedom to use any front-end framework 
  • Build a stack of best of breed services, fit exactly to your business needs
  • Easily share services across all channel heads
  • Update frontend independently of services
  • Innovate and experiment with new channels

Channel head aka frontend

The head in headless is the frontend. This is where you build your tailor made storefront, website or app. The responsibility of the frontend should ideally be to display content and enable navigation and search for your customers to find the products and content of interest.

Technologies used in the frontend are typically; ReactVueNuxtJSNextJSGatsbyJSReact Native and Flutter. The frontends are typically hosted on modern hosting services like VercelNetlifyGatsby CloudCloudflare pages or directly on the lower level web hosting services like AWSAzure or Google Cloud.

Following a headless approach allows flexibility to build the frontend in your favourite framework and host it on your hosting provider of choice. Jamstack, SPA (single page application), SSR (server side rendering) or Native App.

In our open source section you can find a list of open source boilerplates, each using one of the mentioned frameworks

React frontend screenshot

Middleware Service API

The service API is the glue in your headless architecture. It links all the different stack services as well handles parts of the business logic, such as handling payments, authentication, etc. Again, any server-side technology that you are familiar with can be used to build the service API, such as  NodeJSGolang or Ruby and exposed via a simple GraphQL or REST + JSON API.

The individual services are typically implemented serverless for simple horizontal scalability with increased traffic. Practically this is where you connect your API tokens and data from your visitors with the headless API services. E.g. collecting the payments from Stripe callback, creating an order in Crystallize and sending a confirmation email using Sendgrid. The glue for your business.

API services should ideally not persist data, they should simply translate requests between services. The service API is typically hosted on a dedicated service for serverless hosting. Like Vercel, Netlify, Heroku or AWS.

The service API can easily be used across all your channel heads. For example the order confirmation email service can be used in your NextJS eCommerce and your React Native eCommerce App.

In our open source section you can find the Service API boilerplate, built on NodeJS and can be deployed in various hosting providers.

Federated services API diagram

Headless API services

The headless API services are the backend of your headless stack. This is where you build a best of breed stack of services. The toolbox that you use for your Internet craftsmanship. By choosing a range of services you have the freedom to build a stack that fits your business as opposed to shoehorning your business needs into a monolithic single vendor architecture.

Frontend performance

Having picked the right services for the right job will allow your solution to scale horizontally and always perform no matter the traffic.

Pagespeed insights perfect 100 score screenshot
People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community