TL;DR Check out the Bulk Requests and pageContext section below to learn how pageContext works.

Gatsby has become the de facto JavaScript static site generator because of its dedication to performance, near-infinite flexibility, and its embrace of React and GraphQL. Like any great tool, however, Gatsby is not without flaws.

Gatsby allows you to build your static website by querying a GraphQL API at build time. If you choose this approach, as your site grows, your Gatsby build times will likely increase with every added page. Slow build times hinder developer workflows and make deployments cumbersome. In my previous article, I discussed optimizing GraphQL queries in Gatsby to decrease page load times. This article will focus on how GraphQL queries can be optimized to shorten ten minute or even hour-long build times to seconds.

In my article comparing Gatsby to Hexo, I talked about my experience switching writing this blog using Hexo and then later using Gatsby. In the process, the size of my initial page ballooned 5x.

In retrospect, I did not fully understand the abstraction that Gatsby provides. Fortunately, if you follow a simple rule of thumb, you can avoid bloating your network requests and maintain an ultra-performant website.

There are two major static site generators in the JavaScript ecosystem: the incumbent Hexo and the up-and-coming Gatsby. This site was first built with Hexo, but I've recently switched to Gatsby. Let's talk about why.