As I dive further into the wormhole that is software engineering, I have thankfully run into many different tools (frameworks, libraries, packages, etc.) that make developing a lot easier. Plug: Gatsby Review A couple of these tools always seemed similar to me, enough for me to decide to do a deep-dive to understand them better. I'd like to share what I learned, which includes the benefits and drawbacks of each, definitions of both of them, their use cases, and some examples.

Headless CMS Definition and Examples

A headless CMS is a content management system that sends content to the frontend as an API. Without a head, this means that you get to pick and choose which outputs the content is sent to (Melvær, 2020). They are specific to the backend and focuses on storing and delivering structured content. They are often customizable to an extent but offer limited true flexibility. They also require additional server resources than a static page.

The image below showcases how a headless CMS interacts works.

Headless CMS

A headless CMS is able to send and receive data via an API. Integrations can be injected into the API and send out to various apps.

Regular CMS

A regular CMS requires the admin interface to connect to integration, then the database, then integration, and finally to the view layer. This is much more convoluted and less efficient.

Examples

Traditional CMS Examples:

• WordPress
• Joomla
• Drupal - Also offers a Headless CMS
• Weebly

Headless CMS Examples:

• Butter CMS
• Sanity
• Cosmic
• Prismic

Static Site Generator Definition and Examples

A static site generator (SSG) allows a developer to create a static web page from different code or markdown prior to users viewing it. For example, you may write markdown and then use Jekyll to convert it to HTML before the user views the page. The premise is simple: create input files and then utilize a static site generator to present HTML to a user. They make the transition from code to view simple and efficient. Many of the SSGs are optimized for search engines and include some features that provide users with an efficient experience.

The problem with SSGs is that they are exactly that: static. They aren't dynamic, so something like a social media app may not be an ideal candidate for an SSG. They also relegate to simple HTML so they may strip some of the things that developers want to integrate into a project. The research that is necessary to use an SSG is crucial and can be tedious.

Examples

• Gatsby
• Nextjs
• Hugo
• Jekyll
• Nuxt
• Zola

Example

I recently started Wes Bos' course on Gatsby that can be found here. The project created in the course utilizes Gatsby and Sanity, and you can see the outcome on my Github.

You can see the final outcome of the course below.

Remember, a headless CMS is used to manage content between what the user sees and a database, while a static site generator is used to serve static pages to a user from a template engine recognized by the SSG.

Hopefully, this helps you understand both these concepts a bit better! Cheers!

• Aaron

References
Melvær, K. (2020, August 18). Headless CMS explained in 5 minutes. Retrieved from https://www.sanity.io/blog/headless-cms-explained

CMS Diagrams from https://www.storyblok.com/tp/headless-cms-explained