Gatsby Lessons: The Good, Bad, & The Ugly
What is Gatsby?
If you found this article by search, then chances are you already know what Gatsby is.
If not, here’s the TLDR version:
- Gatsby is a React Library and Build system.
- It takes your React application and converts it into a speedy static website, which you can host on edge services.
If you are investigating Gatsby for a project, read on.
Why am I looking at Gatsby?
Project 1 — WordPress
One of my projects is managing a substantial, high traffic WordPress website.
The website has many plug-ins, both custom and third party. The third-party plug-ins saved on initial development time, but the conflicts they cause and instability by suddenly releasing and deprecating features have meant the initial time saved is no longer worth the maintenance overhead.
In addition, under the covers, WordPress is a dinosaur. And not a fast sprinting dinosaur at that, but a pondering diplodocus. ;-)
I’m investigating moving all or part of this WordPress site over to a Static Site Generator (SSG), such as Gatsby.
Project 2 — SPA
A project for another customer has the potential to become a large React Single Page Application (SPA).
The download and running of the JavaScript can prolong the initial loading of large SPAs for the user. And while there are strategies to minimise this, I’m investigating if using Gatsby would help break the solution into smaller and faster loading SPAs.
Side Note: Although Gatsby is an SSG, it does support generating React SPAs, including Progressive Web Apps (PWA) that can run in off-line mode.The Good
So far, I have been very impressed with the results from Gatsby.
There are optimisations of the web pages, with style and code shakedowns, producing lightweight and fast websites.
Gatsby includes optimising images, supporting formats like Webp and automatically generating different sizes and breakpoints. Combine that with Gatsby’s image React components, and you get placeholders, progressive loading, and sensible image loading for the size of the screen.
Gatsby handles routing, converting everything static URLs.
SEO is now easy to introduce, and you can even get an XML sitemap generated for you.
The Bad
OK, it all sounds great, but you need to know a few things.
It’s a Static Site Generator.
It would help if you shifted your mental model for React.
Instead of responding to events at runtime, React is (mainly) used at build time. React is run, and the results are output as HTML.
I say mainly, as it is possible to create React components that interact with the user or APIs at runtime.
When writing code, you need to be clear in your head if it runs at runtime or build-time.
Side Note: Comparison with CMS-driven websitesMany Content Management System websites, such as WordPress, store the content in a database. When the user visits a web page, the system reads the content from the database and generates the HTML while waiting for the web page to display.Gatsby reads the content during the build, generating the HTML at build time. The build process results in a faster web experience for the user, as there is no waiting for a system to read content from the database before generating the HTML.BTW, you can hook up Gatsby to WordPress so that it can read your WordPress content during the build, producing a static HTML version of your website. That sounds great, but there are always many issues to overcome for anything other than simple blogs.
Not all React components will work.
Your library of React components may not work.
The reason is: it’s a static site generator. During the build, things like the Window object isn’t available.
Although there are workarounds, it will require re-writing your components that depend on items unavailable during the build.
The Ugly
Approaching Gatsby with the above knowledge will help avoid many pitfalls. But there are a few ugly things I found during my testing.
Be careful of gatsby develop.
Gatsby provides a CLI. One function it provides is gatsby develop.
This command will dynamically build your Gatsby site, enabling you to edit your code or content and immediately see the results on a local webserver it provides. Great.
However, things will run under gatsby develop that will not run when you build the site.
For example, in some cases, you can use the Window object in components utterly unaware that it causes issues during the build.
Likewise, styles can work under develop that are optimised out under the build.
So while gatsby develop is very useful, make sure you frequently run gatsby build and then gatsby serve to test your site.
Gatsby build cache is not always reliable.
Like many build systems, Gatsby will cache build results, so your subsequent builds are faster.
However, I have found bizarre errors sometimes thrown from deep within the Gatsby codebase. Running gatsby clean before gatsby build usually eliminates the errors, so don’t trust incremental builds completely.
Verdict
The path to producing a Gatsby site has been interesting. And despite a few challenges on the way, I’m still pleased with the results.
I’ve not yet implemented Gatsby on the two projects I’ve mentioned, as it’s still very much in the R&D evaluation, but I have started to test Gatsby on my consultancy website.
Do you have any experience of Gatsby and have any other things to watch out for? Then, please add them to the comments below.See the next article, on integrating Gatsby with Medium.
