The modern web requires that websites be fast. Bounces rates begin to rise significantly the longer it takes a website to load. With dynamic React applications this can be a problem as the time it takes to fetch data and render the site can be significant. Once upon a time, in the early days of the web, most websites were static sites, just HTML documents sent to the browser. Fast forword and most sites are built upon request and sent to the user. This makes sites dynamic and allows the site to be built specifically for the user requesting it. However, this can hinder performance of a site. One possible solution that has been developed is static site generators like Gatsby Js. This article will provide an overview of Gatsby and highlight some of the great features that it provides.

Gatsby Js

The answer to increasing the performance of React applications is Gatsby Js, a “static PWA(Progressive Web App) generator” that uses the modern technologies that we know and love. Below I will explain why Gatsby is so fast and why I am such a huge fan.

Modern technologies

Gatsby allows you to build PWA’s with React.js, GraphQL, Webpack and Modern CSS. The plugin ecosystem which I will discuss later allows the integretation of a host of other modern technologies to help you build terrific apps.

Great Tooling

Gatsby provides developers with really great tools that make the process of building apps smooth and painless. With the Gatsby CLI, getting started is as easy as installing a starter and running gatsby develop. Gatsby provides everything needed to develop, test and build your apps right from the command line. These tools make deployments a synch and many content delivery networks and static site hosts provide guides to help get Gatsby sites deployed globally in minutes.

Routing out of the box

Routing is one of the first challenges that developers face when build an application. With Gatsby, routing is made simple by turning all components in the src/pages folder into pages. Gatsby provides and easy to use API createPages when you need to dynamically create pages at build time. Routing between pages can be done using the gatsby-link package which provides you with added performance gains by prefetching assets when a user hovers over links on the site.

Blazing speed

“Performance isn’t optional, it’s buit-in” Gatsbyjs.org. Gatsby creates your website assets at build time and optimizes them to create the fastest website possible. When a user comes to your website, everything needed to serve the user is already built and optimized to get it to them ASAP. Gatsby utilizes Webpack to provide Code Splitting and Prefetching capabilities for various pages in your app, this can have a huge benefit on Time to interactive and perceived performance for the user. Website performance is a moving target. As technologies change and performance targets move, you can trust that a strong organization and community will continue to adapt and optimize to keep Gatsby sites blazing fast.

Images made simple

One of the most important performance optimization that can be made to a website is on it’s images. Images need to be sized and scaled for many different devices and screen sizes. They need to be compressed and have metadata removed. This is complicated problem that requires a lot of time and effort to implement and maintain. Luckly with Gatsby we get all of this managed for us with the gatsby-image plugin. We can load in images and Gatsby will resize images and optimize them for performance. Gatsby will them determine which images should be loaded for different devices and screen sizes then lazyloads them when needed. Modern image management is simply and performant with Gatsby.

Awesome Plugins Ecosystem

We have already seen some powerful plugins that Gatsby has. But this is just the beginning. The Gatsby community has created hundreds of plugins that extend and enhance Gatsby. We can incorporate Typescript in apps with gatsby-plugin-typescript or convert markdown into html with gatsby-transformer-remark. The options a many and growing everyday.

JAMstack is here

JAMstack is not the future, it’s the present. Gatsby is excellent for building modern websites utilizing JAM(Javascript, APIs, Markup) architecture and helps reap all the benefits that JAMstack provides.

Well, it’s pretty obvious that I love Gatsby and I hope that this article inspires you to give it a try and explore all the benefits it has to offer in helping you build blazing fast modern websites. Stay tuned for my next article on getting started with Gatsby.

Happy coding!