Feature
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
“The popularity of Gatsby.js is largely attributable to the popularity of React on which it is based,” explained Shiklo. There are resources readily available for developers to work with the React framework efficiently. In addition to a strong technology foundation, Gatsby is a free and open-source tool that’s well-documented and has a strong community. The Gatsby community makes it easier for companies to get started and launch sites fast. “With Gatsby developers can jump in without much of a learning curve since they are already aware and well equipped with the tech stack Gatsby is built on,” agreed Deepu Prakash, SVP of Process and Technology Innovation at New York, N.Y.-based Fingent. Technologies like ReactJS, Webpack, GraphQL, and JavaScript are all widely known amongst frontend developers already. That means companies save significant time and money when recruiting and training developers.
“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.
Learning Opportunities
Webinar
May
30
ChatGPT and the Future of Conversational AI
This discussion explores various aspects of AI implementation, ethical considerations, and challenges for your organization.
Webinar
May
31
The Evolution of Employee Listening - 2023 Trends & Best Practices
Learn proven effective methods and solutions to supporting an inspirational future of Employee Voice
Webinar
Jun
1
How organizations can design, build and run Generative AI into the Customer Experience
Discover how to drive enhanced CX through Generative AI
Webinar
Jun
6
The Future of Social Media: Emerging Trends and How to Stay Ahead of the Curve
The impact of emerging technologies like AI on social media
Webinar
Jun
7
The Building Blocks of Personalization
This webinar will explore how personalization can create powerful ecommerce shopping experience.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Webinar
May
30
ChatGPT and the Future of Conversational AI
This discussion explores various aspects of AI implementation, ethical considerations, and challenges for your organization.
Webinar
May
31
The Evolution of Employee Listening - 2023 Trends & Best Practices
Learn proven effective methods and solutions to supporting an inspirational future of Employee Voice
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.
