In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:11 - What is a headless CMS?

It’s a system or CMS that has no front-end (aka head)
Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages

4:37 - Some examples

Can be used with any type of website that can consume an API
WordPress API + Gatsby
Hosted Service + React App

7:06 - Why?

Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc.
Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like
Optimizes for performance with static builds
Hide the implementation details and back-end from view

10:19 - Live vs statically-generated website

Syntax 120 - Gatsby vs Next

10:55 - How?

Connects to API via normal fetch calls/GraphQL/whatever you use
Needs to host your back-end either as a service or on a host
Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify

Links

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - What is a Headless CMS?

Syntax - Tasty Web Development Treats