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 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 is a static site generator that uses React to generate websites which have all the benefits of React while providing a performant, static site.
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.
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".
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.
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.
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.
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.