While static websites may seem like a step backward from today’s feature-packed dynamic sites, many organizations are turning to static site generators to improve site performance and complement their headless CMS’s. One static site generator (SSG) in particular — GatsbyJS — has been gaining a lot of attention in recent years. And it’s not only because SSGs are growing in popularity, but also that React is preferred by 60% of developers over other frontend frameworks.
We’ve turned to tech experts to understand what exactly GatsbyJS is, and why its adoption is growing with companies using headless CMS.
What is GatsbyJS?
According to its website, Gatsby is a open source framework based on React that helps developers build blazing fast websites and apps and it's free too. “Gatsby is a static site generator that makes it [easy] to build fast and interactive websites using React, the popular front end development framework from Facebook,” described Dean McPherson, Co-Founder of Enmore, Australia based Paperform. That means companies can quickly launch simple, highly performant websites, microsites, and progressive web apps (PWAs).
“By default,” added Boris Shiklo, CTO of ScienceSoft, “Gatsby supports progressive image loading (displaying a blurry version of an image before loading the final asset) and responsive image loading (dynamic image sizing depending on the used device). These are just a few examples of the features Gatsby and React have that make sites generated with Gatsby blazingly fast.
Related Article: The Growing Importance of Headless Systems in the Visual Economy
Why Brands are Adopting GatsbyJS
“Moreover,” added Prakash, “Gatsby can be extended with additional functionalities like responsive images, offline functionality, source data from CMS and data markup formats, adding third-party services (Google analytics, etc), and so on.” GatsbyJS is highly flexible and the websites it generates meets the latest web standards by default. These factors make Gatsby a great solution for many companies, but a headless CMS offers further benefits when paired with the SSG.
Related Article: A Closer Look at Headless CMS and the APIs That Power Them
The Headless CMS And Gatsby
While Gatsby is popular in its own right, many companies are finding that the SSG fits well with their headless CMS. “Gatsby is a static site generator,” explained McPherson, “which means that the generation of the website is separate from the serving of the website.” That means the CMS can store the site content and the SSG can pull from there when the static site is built. And this can be automated to trigger when content changes within the CMS. “That way after you make an update to content,” McPherson said, “the website is re-built and the changes are reflected on the website.”
“If you want your content to be easily managed by non-developers (writers, content managers, editors, marketing specialists),” Shiklo said, “a headless CMS solution is an ideal choice.” He says that through plug-ins, it’s straightforward for Gatsby to support the headless CMS options like WordPress, Contentful, NetlifyCMS, Sanity or ButterCMS. “If you have data organized in a headless CMS,” explained Shiko, “you can use Gatsby.js to pull the data and generate fast, secure and device-aware static web pages.”
“Without a headless CMS,” added McPherson, “the content would need to be managed in some kind of raw format in the code itself, which makes it really difficult to allow non-technical people to make content updates.” The site would be extremely fast, but marketers would be left with little options for updating the site content. “What good is that super fast blog,” McPherson joked, “if you can't add new posts.”
Performance is a common motivator of SSG adoption for large companies. “A static website has big advantages over non static websites (e.g. Wordpress) in terms of speed and scalability,” continued McPherson. With a static site, there’s only plain files so there’s no database calls or backend requests required. The static site is pre-rendered, so the content will load and display faster than dynamic websites. This is crucial for a seamless digital experience.
“All together,” concluded McPherson, “Gatsby makes it really easy for developers to make lightning fast websites that don't have to compromise speed for user experience.” And pairing GatsbyJS with a headless CMS empowers marketing teams to significantly transform the digital experience.