Why Use Gatsby?

Arguably the most important part of a project is choosing the right tools for the job. Choose wrong, and you may find yourself fumbling with antiquated technologies while inventing solutions to problems that have already been solved, or you'll spend more time than necessary learning the hot new technology without having a good grasp on why exactly you're using it. As someone that's relatively forward thinking (sometimes to a fault), I often have to fight the urge to end up in the second camp. This website, however, was built using Gatsby. The following will be an elaboration on why exactly I chose Gatsby for this project, and why choosing the hot new technology isn't necessarily a bad thing.

When creating this website, I set out with two primary goals in mind. First and most importantly, I wanted a website indexable by seach engines as Search Engine Optimization is very important for a site of this nature. Single Page Applications are inherently disadvantaged when it comes to Search Engine Optimization because when web crawlers render the site to extract the hyperlinks from it, the entire JavaScript of the site needs to be rendered (as opposed to just the HTML on a static site). Second, I wanted the flexibility and ease of development of a programming language without having to grapple with HTML and vanilla JS. Being able to create reusable React components makes the ease of scaling the site invaluable when compared to what would need to be done in a regular HTML, CSS, and JS site.

The beautiful thing about Gastby and other Static Site Generators is that they allow you to use JavaScript frameworks or Libraries, like React, Vue, and Angular, while still ending up with a Static Website. There's a laundry list of benefits to a Static Site as opposed to a SPA (each have their own use cases that won't be covered here), but that encapsulates my primary motivation for using one pretty well. Furthermore, Gatsby has plugins that make Blogging incredibly easy. To get started, all that's required is a bit of knowldge about markdown and a reusable post component to use.

Important to note is that while Gatsby does allow you to use React which was built specifically to run in the client, your end site will actually be rendered Server Side. Gatsby does something very interesting called Hydration (or Rehydration) that I will not cover here, but the gist of it is that it is distinctly different from the way the DOM is conventionally built in React. This may not seem important, but what this actually means for the developer is that very important browser APIs are not available to you in Gatsby. There are ways around this, such as waiting for the site to render to ask for said APIs, but you can't always build a Gatsby site the same way you would a React site.

Nonetheless I believe these tradeoffs are more than worth it, and if I were to go back and reselect my stack for this site, I would certainly still choose Gatsby. The speed and ease of development along with the SEO benefit over a SPA are almost too good to be true, so long as you know what to expect out of a Static Site Generator and its interaction with the DOM and Browser.