dotCMS: Headless CMS for Gatsby

Many developers have switched from bloated platforms and embraced lightweight headless CMSs and the static site generators (SSGs) that make those beautiful digital experiences possible. 

A static site generator, like Gatsby, leverages JavaScript frameworks and libraries to generate HTML content during build time instead of doing so during runtime.

According to npm trends, Gatsby is the second most used static site generator in the market, in a close battle with Nuxt. 

However, Gatsby has evolved to become more than just an SSG but a fully-fledged framework for a variety of applications. With Gatsby and a headless CMS like dotCMS, developers can build and deploy blazing-fast websites, SPAs and PWAs.

Gatsby 101

Gatsby is a free, open source, React-based framework that helps developers build websites and apps. Not so long ago, it was considered only a static site generator, but since its functionalities go beyond that, it’s now seen as a framework for SPAs and PWAs. 

Gatsby offers users preconfigured features that are ready to use. Instead of having to code your way towards your site or app, Gatsby gives you the tools, so you don’t have to do any coding on the server or go to a query database. 

Benefits of Gatsby

It’s part of the developers’ job to provide every user with the best experience possible regardless of their device and network speed. 

That’s where Gatsby comes in, providing developers with a solid solution that integrates out-of-the-box with a headless CMS like dotCMS. Let’s explore some of the benefits of Gatsby. 

Gentle Learning Curve 

Since Gatsby is based on React.js, the JavaScript library for building UI that most frontend developers know and love, it is simple for developers to make the leap and start using Gatsby. In fact, Gatsby aims to work and behave like a React app, relying on reusable components to simplify development. 

Also, using Gatsby with a headless CMS simplifies integration with GraphQL, enabling developers to query data from markup, SQL databases, or a headless CMS.

Created With Performance In Mind

Slow or bloated sites are the death of every digital brand. Luckily for developers, Gatsby sites are significantly faster than others. 

Gatsby follows Google’s PRPL architectural pattern (push, render, pre-render, lazy-loading), boosting both mobile and digital desktop experiences. Gatsby also simplifies development by compiling Webpack configuration to build your sites, as well as prefetches resources to reduce load times and give users a blazing-fast experience. 

Better SEO

When used as an SSG, Gatsby uses server-side rendering to generate static pages at build time. Dynamic meta information is provided during this process, including meta titles and descriptions and all the content is available to Google bots to crawl. 

In fact, when you inspect a Gatsby-created page, you’ll notice a fully rendered HTML document. The best thing about Gatbsy is that most of its speed advantages come out-of-the-box, but if you need additional speed tweaks, you can upgrade easily by following Gatsby’s crystal clear documentation. 

Another gain on the SEO-front is the fact that Gatsby gives you full control over your website’s content and structure, which translates to control over SEO. You can edit all the meta information and alt-texts to tell Google what your website is all about.

Easier Maintenance

A headless CMS makes it easy for Gatsby users to maintain both the site and the plugins. With a headless CMS, it’s possible to simplify updates and keep things running smoothly. Also, you can leverage Gatsby Cloud; a tool that makes hosting, building and deploying simple, reducing the time IT teams spend maintaining a site.   

Extensive Open Source Ecosystem

Another of Gatsby’s main strengths lies in its robust and open source community. Gatsby’s Github community is alive and well, with hundreds of thousands of developers working together to make Gatsby a better framework for static sites. Also, Gatsby is strong in both plugins and API hooks, with over 2,000 user-created plugins to help other users streamline their Gatsby development.

When to Use a Gatsby and A Headless CMS

Even though Gatsby and a headless CMS like dotCMS are a great combination, that doesn’t mean that Gatsby works for every possible use case. Let’s explore some of the best use cases for Gatsby.

When You’re Building Static Sites

Even though it’s now considered a framework, Gatsby is optimized for generating static websites in plain HTML, JS, and CSS. It is virtually unbeatable when it comes to building and deploying static websites as it provides server-side rendering out-of-the-box as well as all the plugins you need to build a website quickly.

When You Plan On Using Jamstack 

Jamstack sites, like those you can create with Gatsby, allow developers to have more freedom and flexibility. Gatsby enables frontend developers to focus on building the UI and plug in a headless CMS like dotCMS to build every part of the website or app under the same roof, yet separately.

When You’re Building Progressive Web Apps 

Gatsby sites also qualify as progressive web apps as it’s possible to add the web app manifest, a brief JSON file with metadata, to Gatsby. This file provides the browser with instructions on how to behave when installed in a device. Adding this file can be done by installing the gatsby-plugin-manifest.

When Your Team is  Experienced in JavaScript

Gatsby’s learning curve is gentle, yes, but you need a team of developers who are already experienced in JavaScript. If your team is already proficient in JS and React, making the leap towards Gatsby is relatively easy. If you’re already using React components that you want to reuse on a static website, Gatsby can be a good call for JS-proficient developers. 

dotCMS: The Headless CMS for Gatsby

Gatsby has a rich open source ecosystem and essentially lets you build websites the way you want. However, integrating a headless CMS into the equation will take your Gatsby to the next level. 

With functions like Edit Mode Anywhere, dotCMS content API, enhanced integration with GraphQL, dotCMS’s hybrid CMS capabilities support Gatsby on what it does best: help you build fast, eye-catching static sites and PWAs.

Ready to get started with Gatsby? Take a look at a tutorial prepared by Freddy Montes, one of our Senior Frontend developers where he shows you how to build a static site with Gatsby and dotCMS.