The Pros and Cons Of Using Gatsby
We often steer our clients away from WordPress and towards Gatsby when building new websites. This is usually met with some friction. While most clients don't love WordPress, they're uncertain what Gatsby is and why it's being recommended. This article aims to detail some of the unbiased pros and cons of Gatsby.
What is Gatsby?
GatsbyJS is a React.js-based, GraphQL powered static site generator. It is a relatively new technology perfectly positioned to suit medium to large businesses looking to host unique, fast and future-proof websites.
Unlike traditional frameworks like WordPress, Gatsby generates static HTML, CSS and JavaScript files which facilitates incredibly fast page load times, amongst a host of other benefits.
Gatsby works seamlessly with the most popular frontend CMSs such as Contentful, Prismic, Strapi, Tina, and even WordPress.
The final selling point is Gatsby’s ever-growing list of clients: PayPal, Nike, Airbnb, and Braun, just to name a handful that appears on the official website. There is a reason more significant companies are making the jump.
Pros of Gatsby
Incredible performance
We won’t get too deep into the technical weeds here, but Gatsby works differently from WordPress. Rather than running code on a server that tells a user’s browser what to generate, Gatsby builds the site in preparation for the user arriving, which is called pre-rendering static assets.
Since there’s no time wasted waiting on server responses, page load times can be incredibly fast.
A million articles on Google have already outlined why this is a good thing. It boils down to not keeping your already impatient visitors waiting and making the Google algorithm happy.
Once Gatsby has built the static assets, they are uploaded onto a global content distribution network (CDN). The CDN delivers the site content from the physically closest server. Serving content from the nearest location is a perfect solution for any business that receives traffic from multiple countries.
Search Engine Optimization
SEO is a largely misunderstood field. Every guru has their opinion on how Google’s algorithm works. No one knows exactly how it works, but Google has announced a few variables they consider when deciding which website gets to be on the first page.
These considerations are; Core Web Vitals, the correct use of page metadata, the quality of content, structured data, and the number of backlinks pointing to a website.
The development team behind Gatsby have put a lot of effort into making the framework pass Google’s Core Web Vitals assessment out of the box. There are plugins to provide structured data, and adding metadata is standard functionality.
To summarise, Gatsby ticks all the SEO boxes out of the box and will outperform almost any other website technology with proper configuration.
Waterproof security
Most website security incidents happen when server credentials are exposed. The bad guys out on the web are constantly probing, looking for a way to access the hosting service, which allows them to control the website and its content.
Gatsby is a serverless technology, so there’s a significantly reduced attack surface.
Executing any kind of meaningful website compromise would be incredibly difficult. Gatsby is a technology that professionals typically implement, resulting in less of the common security mistakes. Hackers don’t typically target Gatsby sites because they’re not low hanging fruit.
Boom in popularity
GatsbyJS and its sister technology, NextJS are going through a boom in popularity. The increase in popularity isn’t directly a benefit, but as more adopters come on board, the platform becomes more mature and offers more valuable features.
The notable companies using GatsbyJS are; PayPal, IBM, Spotify, Braun, Figma, Meetup, Snapchat, Giphy, National Geographic, KFC Global, and thousands more.
When companies with multi-million dollar technology budgets move their entire website stack to GatsbyJS, it means they’ve done the research and made a decision that will impact their bottom line.
Plugins and integrations
Gatsby doesn’t handle plugins the same way WordPress does. Unlike installing plugins through the graphic user interface, Gatsby provides a file where new Gatsby plugins are listed like this;
//In your gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-google-tagmanager",
options: {
id: "YOUR_GOOGLE_TAGMANAGER_ID",This code snippet may seem convoluted, but it’s an effortless way to add new functionality to a website.
The Gatsby plugin library is becoming very extensive. There are plugins for really niche use cases, like using the Google Translate API to automatically translate website content when a user visits from a different country.
A big plugin and integration library saves custom development time because developers can add many new features with a few simple lines of code.
Extensibility
Gatsby is a popular framework for web applications because it can consume different APIs and data sources.
Taking data from different sources makes it an excellent candidate for businesses that may want to integrate other applications within their business with their website. For instance, if a business used a system that measured their performance and outcomes and wanted to display this information for their clients to view publicly, this could be facilitated through the website.
Integrates with Content Management Systems
Gatsby doesn’t have a graphical user interface like WordPress. It’s a framework for writing code. But it does integrate with virtually every content management system on the market.
Content Management System functionality is really what people think about when discussing WordPress. This functionality includes writing new posts, managing images, and inviting new users.
WordPress is an excellent solution for blogs and smaller websites. That was its original purpose. However, its rigid architecture makes it tricky to modify for all purposes (not that people haven't tried).
This issue has catalysed a new age in content management systems. There are hundreds of new CMSs that have hit the market in the last few years.
These new CMSs aim to solve different problems, and some of them are perfectly suited to most small to medium business use cases.
The three CMSs we recommend are;
Used by Google as their CMS to train their new staff members, Prismic provides a clean and straightforward interface that feels familiar for most users.
Prismic allows each headline, image, or text block on a website to be created as a “slice”. Administrators and marketers can change slices without needing help from the technical team. Developers are no longer required to have control over changing any content on the website.
Prismic is a relatively inexpensive platform. They provide a generous free tier but charge $7 per individual user.
We recommend Prismic to most of our clients.
Contentful is probably the biggest name in the CMS space at the moment. Larger companies are turning to Contentful because it offers an incredible range of customisations.
Contentful pushes the angle of being API-first and claims that businesses using their platform can deliver data to any device (phone, computer, smartwatch, fridges, etc).
Contentful allows for custom editorial experiences, which is handy for teams where different staff need to create and publish multiple types of content (blog, legal articles, videos).
Admittedly, Contentful is better suited to enterprise projects and web applications that need to deliver content to multiple websites or applications. It can be a little over-engineered for most simple websites.
Contentful offers a reasonably generous free plan. Support from the Contentful team is only offered on paid plans, which start at $489USD, which can be hard to justify for projects that don’t require all the features Contentful offers.
Unlikely Prismic and Contentful, Strapi is open source. Being open-source means that it needs to be hosted on a server by the Clean Commit team, but there’s no pricing pressure on adding more users. It also means a staging environment can be set up to preview and test changes before being made to the live website.
Strapi’s user interface is easy to navigate and focuses on setting up reusable document types. These document collections could be blog articles, new pages, team members, new portfolio pieces, etc. Collections are organised in the side menu for quick and easy access.
The most significant point of difference for Strapi is that its code can be changed by your development team if necessary. This is a double-edged sword. One on hand, if there’s a critical bug, your developers could be able to fix it. On the other hand, issues can't be reported to the product development team with any expectation that they'll be solved.
Strapi is a great option to include on this list, but probably still behind Prismic and Contentful.
Edge rendering
Edge rendering is a technique where custom JavaScript logic is added to the website to tell the browser what values to return based on the location of the requesting server. In other words, if someone accesses your website from New Zealand, they will see different content than someone viewing the same page in Australia.
There’s a more detailed breakdown of edge rendering here.
This feature is currently in early release status and one that’s getting the development community excited.
Given how new this feature is, we’re unable to attest to its reliability. However, Netlify is a well-known and respected organisation in the technical space so when they come out with new features, they're likely to work well.
Edge rendering is only available to frameworks like Gatsby and NextJS. It is not a feature that is available for WordPress.
Based on ReactJS
Gatsby is a “framework”, which is essentially a template of a working program that developers selectively modify by adding code. Most big companies build their websites and web applications with frameworks because they make building websites and applications quicker and easier.
Gatsby is built on top of another framework called React. React was created by Facebook, and it’s currently the most downloaded project on Github.
Having a large developer community is a benefit because countless resources support its growth and maintenance. It’s not a niche product that is likely to disappear in a few years.
Standardised developer experience
There are a million ways to build a WordPress site. Designers can use themes like Elementor and Divi to create sites without ever touching a line of code. Similarly, other themes can be used as a starting point and then modified. Then there are approaches like the roots.io ecosystem where coding features from other frameworks like Laravel are inserted into the process.
The point here is that handing a WordPress website from one developer to another can be a difficult task. The way it was built is unlikely to be consistent with how the next developer works.
Gatsby can also be implemented in different ways, but the variation in approach is much smaller. The framework forces development to happen in a reasonably repeatable fashion.
If a new development team needs to work on the site, they can maintain or extend it without a long learning curve.
Reduced maintenance
Maintaining a GatsbyJS project is a matter of keeping the underlying technologies up to date. Sometimes this will cause minor issues across the site, but it’s usually not a big deal to clean up.
This kind of maintenance doesn’t need to be performed regularly. It’s only necessary when new major versions of Gatsby are released.
WordPress, however, needs constant maintenance and attention. Plugins need to be tended to every month to keep security tight. WordPress plugins always pose a risk that new, poorly reviewed features have been added to their codebase that causes a fatal error to your site.
It sounds like hyperbole, but we’ve heard countless stories of WordPress owners whose sites have fallen over from updating a single plugin.
Progressive Web Application (PWA) capabilities
Gatsby comes with the option to act as a PWA straight out of the box. PWA architecture makes a website feel like a native application so it can do cool stuff like being saved as a shortcut on a mobile device homepage, send push notifications, and work offline.
Accessibility
The Gatsby development team have put a significant amount of effort into creating easy tools for achieving accessibility. These tools are a bit technical, but they’re available out of the box and can be switched on during development without significant effort.
More detail about Gatsby’s accessibility capabilities can be found here.
Multi-lingual options
The Gatsby team have created three different “internationalisation” plugins. All the plugins translate text and formats dates according to the user’s location. Two of them use Google’s translation API, while the third has its own translation service.
Adding multi-lingual support to a Gatsby site is incredibly easy and quick. It does require a little testing to ensure the changing content length doesn’t disrupt the design, but overall the process is simple and reliable.
Disadvantages
Build times
When administrative users save a change in the content management system, they expect to see the difference instantly reflected on the website. Due to the way Gatsby pre-renders assets, there is typically a 1 to 3-minute delay.
This delay can cause some frustration for new users, but there are solutions to ease the transition. Prismic offers a feature that previews the content changes on the website while the editor is working on the document.
No plug-and-play functionality
Gatsby doesn’t offer a graphical user interface. It’s a framework for writing code and building websites that integrates with other platforms like content management systems.
A non-technical user can’t simply install Gatsby and get started. There needs to be a period of planning, designing and developing before the website can be used.
A properly planned and executed project isn’t technically a disadvantage for most companies. Still, it can be an issue for small businesses that just want to spin up a couple of web pages.
No WordPress-style plugins
Plugins for Gatsby function differently from WordPress. They typically let Gatsby access an API or some kind of data source. The development team is then required to build an interface for the user to interact with the data.
Plugins for WordPress usually come built with both “sides” of code. They have frontend code that tells the browser how to display the data and backend code that pulls it somewhere.
The disadvantage for Gatsby is that end-users can’t simply jump into a plugin store and pick new features to add to the website. They need to be discussed with the development team and built into the code of the website.
Need to modify scripts and Google Tag Manager
Gatsby operates as a single page application. This architecture means that Google Analytics can no longer recognise new page views.
In Gatsby, events trigger when a user moves from one page to another, but they need to be set up correctly in Google Tag Manager and Google Analytics before these platforms will acknowledge them.
Learning a new CMS
The most significant disadvantage for most companies moving from WordPress to Gatsby is learning a new system. It’s hard to dress this one up. Learning new processes and technologies is part of remaining flexible as an organisation.
The content management systems we’ve suggested will feel familiar for most users but will likely slow productivity down for a short period of time.
Conclusion
We've tried to paint an unbiased account of the pros and cons of using Gatsby. It's not a silver bullet and isn't always the right choice. But it's gained a lot of popularity over the past few years because it's a great solution for a lot of companies.
If you want your website to be fast and have access to developer support, or know how to code yourself, then Gatsby is an excellent choice!
