What is a Headless CMS?

What is a Headless CMS?

Have you heard this term going around? It's quite in vogue. It's very related to The Big Conversation™ on the web the last many years. How are we going to handle bringing Our Stuff™ all these different devices/screens/inputs.

Responsive design says "let's let our design and media accommodate as much variation in screens as possible."

Progressive enhancement says "let's make the functionality of this site work no matter what."

Designing for accessibility says "let's ensure everyone can use this regardless of their capabilities as a person."

A headless CMS says "let's not tie our data to any one way of doing things."

#A "regular" CMS gives us three things

1. A way to store data
2. A CRUD UI
3. Ways to display the data

#A "headless" CMS only shares the first two

1. A way to store data
2. A CRUD UI
3. An API to the data

The "head" (that we are chopping off! eww!) is the display or "view" part of a CMS.

#TL;DR graphic

#Tech comparison

Perhaps in a regular CMS, the only way to get at the stored data is functions it provides. Like:

<?php MyCoolCMS->get_post_data(12); ?>

<h1>
  <?php echo post_title(); ?>
</h1>

<?php echo post_contents(); ?>

If you want at that data, the only way in is using the functions it provides. You could probably write a view that outputs like an API. Or you could write queries into the data storage to get what you want. But those things aren't "first class citizens" of the CMS.

In a headless CMS, access to that data would be a URL endpoint like:

https://api.our-stuff.com/posts?id=12

Which would spit out:

[
  {
    id: 12,
    title: "Post Title",
    authorName: "Chris Coyier",
    dateCreated: "2007-07-03 10:42:02",
    postContent: "<p>A long time ago...</p>"
  }
]

Or something like that.

The URL structure and query params and all that would be up to the CMS and in all likelihood be "RESTful". I'm not qualified to give advice there, but it's a pretty easy thing to web search and read about, as well as look at reference implementations.

#You don't even know what the next THING is.

Maybe it's a little implant in your wrist that projects a screen onto your forearm. It's super popular. Everyone is getting one. The company that makes it allows people to write apps for it, but it doesn't have a web browser. It's got network access though.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

So now, if you wanted to, you could use whatever system they have set up to write an app, use the network access, and get your data over to it to use.

You didn't have to know this new thing was coming along, your data is already ready-to-travel.

#Just because it's an API doesn't mean the views using it are client side

Oh great, more sites that only work with JavaScript.

Nah. Server side code can read and digest data from an API just as well as client side code can.

#Can you use a "regular" CMS as a "headless" CMS?

Sure.

We have a tutorial on the WordPress REST API that might be of interest.

WordPress is certainly a "regular" CMS in that is absolutely has the concept of views, but it's not required that you use those views. If you wanted to digest WordPress entirely through the API, that's possible.

#Listen to a whole conversation about this

Dave Rupert, Jeff Eaton, Matt Dennewitz and I talked at length about this on ShopTalk.

#Are people actually doing this?

Yes. I've seen some implementations and hear tale of widespread usage across major publications. I'm not sure I'm cleared or qualified to explain them though.

Are any of you doing it?

[출처] https://css-tricks.com/what-is-a-headless-cms/