Headless CMS

A quote says headless CMS. That's a category, not a product.

The short answer

A headless CMS stores your content and hands it out over an API, leaving everything about how it looks to whatever your team builds on top. Contentful, Sanity, Strapi and Payload are examples. One content store can feed a website, an app and anything else. What editors give up is the page.

Somebody has written headless CMS into a proposal, and it reads like the name of a product you could look up. It isn't. It's a way of arranging content, and several companies sell that arrangement in shapes that don't much resemble each other. Here's what it does and what it takes away.

The word describes an arrangement, not a product

A content system normally does two jobs. It holds your content, and it turns that content into pages. A headless one keeps the first and drops the second. Content sits in a store with a structure you define, and anything that wants it asks over an API and gets back data. No layout, no page, no opinion about how it looks.

The head in the name is the front end, the part a visitor sees. Take it off and what's left is storage with a door in it.

Four names come up most often, and they aren't variations of one product. Contentful is a hosted service with content types set up in a browser. Sanity's editing interface is software you run and can change, in front of a content store Sanity operates. Strapi and Payload are open source, so you can run them on your own hosting, and Payload's content types live in code alongside the site rather than being clicked together. All four keep moving, so take features and plans from the vendor's own page on the day you compare them.

What it was built to fix

The older arrangement works right up to the second place your content has to appear. A page-based system holds your services inside the pages that display them, so a service description isn't something the business owns. It's part of a template.

Then a mobile app arrives, or a screen in a branch, or a partner listing your services on their own site. Somebody copies text out of a website, pastes it somewhere else, and the two versions start drifting.

Separating the store from the display fixes that, and it's worth being precise that this is the problem it fixes. Content lives once, in a structure, and every surface asks the same API for it. Change a service description and it changes on the website and in the app, because neither was holding a copy.

  1. 01

    An editor saves

    Fields on a record: a name, a description, a photo, a link to another record. No layout involved at any point.

  2. 02

    The store serves it

    The content sits in one place and goes out over an API to anything holding a key to it.

  3. 03

    Your front end builds

    Code you own turns those fields into a page, either ahead of time or on each request.

  4. 04

    A visitor gets a page

    The first point in the sequence where anybody can see what the change actually looks like.

How one edit reaches a visitor when the content store has no front end of its own. The editor works in fields, and the page only exists at the last step, which is why preview has to be built rather than assumed.

Editors stop editing pages and start editing records

This is the change your team will feel, so show it to them before anyone signs. In a page-based platform an editor opens a page and changes what's on it. Here they open a record, fill in fields and save. Where those fields turn up was somebody else's decision, made earlier.

For content that repeats, that's a real upgrade. A service has a name, a description, a lead time and three photos, everywhere it appears. Nobody can accidentally bold one description or give another a heading two sizes smaller. Translation gets easier for the same reason: a field is a known thing, and a paragraph buried in a page is not.

It also means the content outlives the site. When the design gets replaced the records don't move, because they were never part of it. Where a site is mostly one-off pages that are each different, though, the model works against you.

Where it stops, and it's the same place every time

Nobody can see the page. That's the ceiling, and most other objections are versions of it.

An editor typing a headline into a text box has no idea whether it wraps onto three lines on a phone. The preview a page-based platform gives away is, here, something somebody builds: a route through your front end that renders unpublished content, secured so it isn't public. Vendors sell tooling to help, and it still has to be wired in.

The second limit is that no ecosystem is waiting for the front end. A form, a site search, a redirect from an old URL, the metadata search engines read. On a page-based platform most of those are an afternoon and a plugin. Here each one is built or bought and wired in, which belongs in the estimate rather than in month four.

The third is composition. If your marketing lead wants to assemble a campaign page out of blocks, that has to be modelled as blocks on purpose, or every new layout goes back to a developer. Teams find this out after launch, when the first campaign page fits no type anybody defined.

If what you want is a colleague changing the site on a Tuesday without booking anyone's time, the Webflow and WordPress pages here describe the other side of this trade.

Headless CMS

Page-based platform

Editing a page

Headless CMS: Fill in fields. What it looks like happens somewhere else.

Page-based platform: Change it while looking at it, and break the layout the same way.

A second channel

Headless CMS: Ask the same API again. Each new front end still gets built.

Page-based platform: Copy the words across by hand, or bolt an API on afterwards.

How it looks

Headless CMS: A developer and a deploy for every visual change.

Page-based platform: An editor moves it, until the change is one the theme never allowed for.

A form or a search box

Headless CMS: Built or bought, wired in, then owned by you.

Page-based platform: A plugin exists. Now you own a plugin.

Moving off it later

Headless CMS: Records export cleanly. The front end is a codebase to keep or drop.

Page-based platform: Content exports. The theme and the plugin behaviour get rebuilt.

A headless content store with a front end you build, against a page-based platform, at five points where the difference shows up. Each side costs you something at every one.

What it costs you in people

Buyers assume a hosted content store leaves nothing to look after. The store is somebody else's problem, and the front end is entirely yours: a codebase with dependencies that go out of date, a hosting arrangement, a build that must keep working, and no vendor who will fix it at two in the morning. This doesn't reduce the technical people you need. It moves them off the platform and onto your site.

That works when there's a standing arrangement with whoever built it, or a developer on staff. It's a poor fit when the plan is to build once and touch it rarely, because everything that rots is now on your side of the line.

So settle two things before comparing products. Who publishes, and whether they'll ever need to see a page before it goes live. Then who owns the front end in year two.

Worth knowing before you start

  • Ask to be shown the editing screen with a real record open, and ask where the preview button goes. If preview isn't in the estimate, it hasn't been built.

  • Ask who can add a field, and whether it needs a deploy. In some products the model is clicked together in a browser. In others it lives in code and ships with the site. The response times are nothing alike.

  • Ask what a visitor sees if the content API is unreachable. A site that builds its pages ahead of time keeps serving them. One that fetches on every request goes down when the vendor does.

  • Write your content types and their fields on paper before comparing products. The products differ less than your model does, and a bad model outlives whichever vendor you pick.

  • Check how the vendor counts users, records and API calls, because that's what your plan gets measured against as the team grows. Take those numbers from the vendor, since published plans change.

Common questions

The head is the front end, the part that turns content into pages people look at. A headless system never had one. It stores content in a structure you define and hands it out over an API. Building something to display it is separate work with its own cost.

Neither is better, and WordPress can be run headless anyway, publishing over its own API into a front end somebody else builds. The useful questions are whether your content has to appear in more than one place, and whether the people editing it need to see a page.

Only if somebody designed for it. Content types with a fixed set of fields make every campaign page a developer task. Modelling a page as blocks an editor can reorder gives that back, and costs more to build. Decide before the content model is signed off.

Not by itself. You control exactly what each page sends, which helps if somebody uses that control. What you don't get is the defaults. Metadata fields, sitemaps, canonical tags and redirects from old URLs all become things your build has to include on purpose.

Less than in most places. It's structured data behind an API, the easiest kind of content to get out, and the open source products can run on hosting you control. Check whether your images sit on the vendor's own service, and whether an export includes the content model as well as the records.

Related

Want to talk through your situation?

A short call is usually enough to tell whether this is the right work for you. If it isn’t, we’ll say so.