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.
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.
Traditional CMS Examples:
Headless CMS 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.
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!
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