Go Back

Gatsby: The Good, the Bad, and the Ugly

Posted by Charlie Ontiveros on 2019-05-07

Intro

Gatsby is a popular static site generator based on React.js. As a new React.js user, I'm using Gatsby to rebuild my blog, which currently runs off Wordpress. What follows is a review of my own experiences with Gatsby; the good, the bad, and the ugly.

The Good

Lots of Documentation

Gatsby has tons of documentation available. They cover step by step installation instructions, plugin configuration, features, and also have explanations of how Gatsby' works under the hood. The community is very active in contributing to the docs and that's always a good sign for a new technology.

Starter Templates

As you start diving into Gatsby, you'll find it has a lot of moving parts. Fortunately, the community has stepped up and created starter templates. The templates are easy to install.

For example, if you want to start off with the most popular blog starter template, you can run the following:

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

This will create a new folder called blog and install the starter into that folder.

There are many different types of starters, with the gatsby-starter-blog being the most popular.

Free Hosting

As a static file generator, Gatsby allows us to deploy simple websites like company sites and blogs to services like Netlify, which is exactly what I did. Previously, I would spend about an hour setting up an EC2 instance on AWS and configuring Apache to serve my website. Not anymore. With Gatsby and a Github repo, I simply push my updates to my repo and Netlify will automatically update my website. Netlify is amazing and you should check it out if you haven't!

Performance

Apart from the performance React brings to the table, Gatsby prefetches resources intelligently. For example, go to Gatsby.org. Then open up the Network tab on Chrome's Dev tools. Clear out the current logs, then go back and hover over different links. You should see requests are being made even though you actually haven't clicked on anything yet. Prefetching resources makes for a faster user experience.

I ran a Lighthouse audit on Chrome and got 100 on almost all categories! I'm very impressed indeed.

The Bad

Documentation Could Use Better Organization

Gatsby has a ton of documentation, and one downside is there is too much overlap between some topics. I found myself going into different pages looking for a specific piece of information. I also rely on Google to get me to the correct page rather than navigating the site internally. This is a common problem growing knowledgebases face, so I can't fault Gatsby too much here. Having a lot of documentation is better than having too little.

GraphQL

Gathering information to use in Gatsby works via plugins that take a specific type of data (like Markdown) and transforming it into information that can be accessed via GraphQL. Although GraphQL is neat, it's a new technology that a lot of people are not yet acquainted with. The downside here is if you don't know GraphQL yet, this will be yet another thing to pile on the ever-growing list of things to learn.

If you don't want to use GraphQL with Gatsby, you certainly can. However, this will mean foregoing the use of many plugins and building things from scratch. Which of course, negates a lot of the benefits Gatsby provides.

The Ugly

Configuration Challenges

One of the biggest downsides to Gatsby is it has a lot of moving parts. One example is that plugins that must be mixed and matched in a specific manner to achieve a certain task.

For example, the gatsby-remark-images plugin must be nested inside the gatsby-transformer-remark in order for it to work properly.

One issue I ran into when adding plugin configurations from different tutorial pages was things did not work if I added duplicate plugins or didn't nest them correctly. I wouldn't even get an error in certain scenarios.

Beyond the plugins, there's also the node APIs that, depending on your use case, must be added in the gatsby-node.js file.

Conclusion

All in all, Gatsby is amazing. It's highly flexible and very powerful. However, with great power comes...a great learning curve?... Yeah, let's go with that.

Be prepared to put in a few hours going over the documentation and GraphQL. Maybe even an online tutorial or two. Shoutout to Brad Traversy's excellent Gatsby JS Crash Course on Youtube.

I also highly recommend installing a starter library as that will come with pre-configured plugins. Then, you'll at least have something you can start tweaking for your specific use case.