Recently I’ve spent some time learning Gatsby for React. This article is based on my initial experience from playing around with Gatsby in a small personal project (this blog).
As web developers we make a lot of dynamic websites pulling content from various data sources and displaying it nicely. Over the course of the years we’ve spent a lot of time optimizing the performance of these web solutions by building caching mechanisms to be smarter when to fetch the data from our data sources. When you try Gatsby for React you’ll meet a static site generator that is built for performance out of the box so you can focus more on what matters in your website project. Gatsby follow a lot of best practices so you don’t need to think about all the details in Google guidelines in every website project. Using Gatsby your site will most importantly be fast for the visitors and give you top score in Google PageSpeed Insights by default.
Ultimately what the browser receive from any request is a bunch of HTML, CSS av JavaScript to render the site or application we’ve built. In today’s mobile world speed is everything. We are talking about Time to First Byte (TTFB) and First Meaningful Paint etc. Google want to make the web faster and provide tools and information to help you build high performance web sites PageSpeed Insights and Lighthouse.
Gatsby is really focused on the end result and provide a set of tools to build/compile the your project with best practices in mind. This give you a good starting point as performance is front and center and built into the tool and your workflow as you learn Gatsby and your project grow.
With Gatsby you pull data from different data sources like CMS (WordPress, Drupal, Contentful, Sanity.io, Craft CMS etc), Markdown-files, databases, API’s (JSON, XML YAML etc) and combine then with GraphQL in the front-end code using React. Gatsby’s comes with it’s own development server for rapid development using hot-reloading while developing. When you’re ready to deploy you can host your site on any static web host (Amazon S3, Netlify, GitHub Pages, Surge.sh, Aerobatic, Now.sh & many more).
npm install --global gatsby-cligatsby new gatsby-sitecd gatsby-sitegatsby developGatsby will now start a hot-reloading development environment accessible by default at localhost:8000.
You can try editing the JavaScript pages in src/pages. Saved changes will live reload in the browser.
Now you’re all set to start exploring Gatsby. I recommend you start with the Gatsby.js Recipes and the Awesome Gatsby Resources to learn more about Gatsby.
It’s something about the approach Gatsby takes to website development that is attracting. Because of the build toolchain is provided you can focus on building your content, you can bring in existing data from existing data sources and build new and faster front-ends which use less resources in production. Good for you, good for your users and good for the environment. If you’re a web developer and haven’t tried Gatsby yet - give it a try and see if you like it :)