Skip to main content

Headless architecture with best of breed stacks

Psst: we are hiring remote frontend developers and backend developers.

Illustration of a person holding a laptop and a person holding a picture of cat

Headless architectures enable a decoupled approach to web and app development. You can re-use content and services across multiple channels or heads. With a proper headless architecture you can also build a centralized repository of re-usable services within your organization. Best of breed enabling Internet craftsmanship. Here is a walkthrough of the architecture concepts by using best of breed stacks.

Headless architecture

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 PIM, eCommerce, CMS, Payment and Authentication from the frontend. To glue the heads together you typically add a layer of shared internal services that handles authentication, order intake or payment.

The benefits of this type of architecture are:

  • Freedom to use your favourite front-end framework 
  • Build a stack of best of breed services
  • Easily share services across all channel heads
  • Update frontend independently of services
  • Innovate and experiment with new channels
Headless architecture diagram

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; React, Vue, NuxtJS, NextJS, GatsbyJS, React Native and Flutter. The frontends are typically hosted on modern hosting services like Vercel, Netlify, Gatsby Cloud, Cloudflare pages or directly on the lower level web hosting services like AWS, Azure or Google Cloud.

You really are free 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 - you decide. Freedom.

React frontend screenshot

Service API

The service API is the glue in your headless architecture. It is typically built in NodeJS, Golang or Ruby and exposed via a simple GraphQL or REST + JSON API. Using a federated GraphQL API can be an elegant way of exposing a single service API endpoint. You can have multiple serverless services that are glued together using Apollo federation.

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.

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.

A stack for headless eCommerce with Crystallize could look like:

Frontend performance

A perfectly sticked together headless architecture can enable great site speed. Like for example this very blogpost you are reading. Scoring a perfect 100 core web vitals score.

Pagespeed insights perfect 100 score screenshot