Gatsby.js and why you should check it out.

2019-03-02

I just finished moving my personal website from Gatsby v1 to v2, So I thought now is a good time to talk a about my experience with Gatsby and why you should check it out.


Static Site Generators

Static Sites allow for a website to be both fast and cheap to host. A static site generator takes in code then spits out the static html/css/js which is served to the browser.

Gatsby Benefits

Gatsby is a static site generator that uses React to generate websites which have all the benefits of React while providing a performant, static site.

Ease of Use

  • Plugins: Gatsby has powerful, well-maintained plugins; I'll dive into some later.
  • Dev Setup: Webpack and the Gatsby CLI are ready out of the box for working locally.
  • Community: Gatsby has an active community around it with an army of contributors.

Built in Optimization

A big focus with Gatsby is providing a performant experience. Some features provide incremental performance while other features, like dynamic image sizing can make a night and day difference for those with slow network connectivity.

In the end the proof is in the pudding. Looking at the lighthouse report within Google Chrome, you can see all the work Gatsby does behind the scenes to make an application blazing fast.

Code Splitting

Instead of serving every piece of media, css file, and js on a page; Gatsby sets up code splitting for each page of the website. This means when a user goes to the "About" portion of my website, they are not sent all of the data from my "Blog Posts".

Prefetch and Caching

What if you could know when a user was going to navigate to another page before they do? Gatsby performs this magic in a simple way of checking for the user to hover over navigation. This pairs well with page-based code splitting.

  1. Gatsby provides the user with a bundle of code based on the page a user is on.
  2. User hovers over navigation of another page.
  3. Gatsby then grabs and downloads the new bundle.
  4. User clicks the navigation and (almost) instantaneously sees the next bundled page.

Images

I brought up how plugins provide ease of use. A perfect example is gatsby-plugin-transformer and gatsby-plugin-sharp.

gatsby-plugin-sharp takes images provided to Gatsby at build time and generates multiple compressed versions on the original image.

gatsby-plugin-transformer takes these images created by sharp and dynamically shows images based on website speed. This provides users with immediate content which improves as site loads.

Static Site Hurdles

A problem not related to Gatsby, but static websites as a whole is not having a server-side processing.

An example is wanting the ability for people to subscribe to a Mailgun mailing list. The problem is not wanting to expose the private API key on the client which is used for Mailgun's rest API.

I ended up creating a microservice in the form of a Lambda function to proxy this request.

This isn't a big issue. And I would still have to write the proxy even if this website used client-server. Still, a important problem to consider is how to handle server-side data processing when using a static website.

Conclusion

Gatsby is a great framework to make a performance-first React website.

Gatsby has a great tutorial for beginners to check out if you're ready to dive into some code. Level Up Tuts provides a more in-depth tutorial on Gatsby which I found very beneficial.

I would strongly suggest checking out shopflamingo.com for a great demo of using Gatsby for e-commerce application.

  • Linkedin Logo
  • Twitter Logo
  • Github Logo
Contact Me:
jacob@roush.io