Skip to main content
More in Learn

Headless Architecture

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

Headless Architecture

What Is Headless Architecture?

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

The benefits of this type of architecture are:

  • Freedom to use any frontend framework or modern approach to web development like Jamstack
  • Build a stack of best of breed services that fit precisely your business needs
  • Easily share services across all channel heads
  • Update frontend independently of the services
  • Innovate and experiment with new channels
  • Better performance

Channel Head AKA Frontend

The head in headless is the front end, and this is where you build your tailor-made storefront, website, or app. The frontend’s responsibility ideally is to display content and enable navigation and search for your customers. To deliver a compelling product story that will help them find, explore and purchase the products and content of interest.

Following a headless approach allows flexibility to build the frontend in your favorite framework and host it on your hosting provider of choice. Modern-day frontend technologies are; React, Vue, Nuxt JS, Next JS, Gatsby JS, React Native, and Flutter.

The frontends are typically hosted on modern hosting services like Vercel, Netlify, Gatsby Cloud, Cloudflare pages, or directly on the basic cloud web hosting services like AWS, Azure, or Google Cloud.

In our open source section, you can find a list of open-source boilerplates, each using one of the mentioned frameworks. They are production-ready solutions, tuned for performance, and a great starting point for you to build a tailor-made shopping experience for your headless commerce business.

Examples of an ecommerce store done on headless architecture.

Middleware Service API

The service API is the glue in your headless architecture. It links all the different stack services and handles parts of the business logic, such as handling payments, authentication, etc. Again, any server-side technology you are familiar with can be used to build the service API, such as  NodeJS, Golang, 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 order in Crystallize, and sending a confirmation email using Sendgrid. The glue for your business.

API services should ideally not persist data, and they should translate requests between services. The service API is typically hosted on a dedicated service for serverless hostings, 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 everything about the Service API boilerplate built on NodeJS and deployed on 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 the 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.

Performance Boost

User experience and conversion are directly affected by the page speed and one of the biggest benefits of going with headless architecture is better performance of your pages. In the speed-obsessed world (and Google) every second matters and going headless is a shortcut to the results (just take a look at the performance data of this page).

Headless approach page speed example.

Challenges

Going headless is not without its challenges. With the workflow of headless architecture being more developer-centric you (or your team) will need more technical skills to work with it. And with a growing number of headless services decision-making can be tougher than with traditional monolith solutions.

There are no cutting corners on either of these. Still, dev-friendly solutions, much like Crystallize, can help you go to market faster with a tailor-made solution for your business.

People showing thumbs up

Need further assistance?

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

Join our slack community