I just finished moving my personal website from Gatsby v1 to Gatsby v2. I thought now is a good time to talk a bit about my experience with Gatsby and why you should check it out.
Static Sites allow for a website that can is both inherently 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 your site which gives you 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 features like dynamic image sizing can make a night and day difference for someone 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 per page of your website. This means when a user goes to the "About" portion of my website, they are not sent all 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-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 rather 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.
I would strongly suggest checking out shopflamingo.com for a great demo of using Gatsby for e-commerce application.