What is Gatsby ?

What is Gatsby ?

Gatsby is an open-source static website generator (SSG) that is based on the frontend development framework React and makes use of Webpack and GraphQL technology. It can be used to build static sites that are progressive web apps, follow the latest web standards, and optimized for speed and security.

gatsby1.JPG

When you code and develop your site, Gatsby transforms it into a directory with a single HTML file and your static assets. This folder is uploaded to your favorite hosting provider.

What is a Static Site Generator ?

A static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time.

gatsby2.JPG

Advantages of static site generators

  • Static site generators reduce site complexity. That, in turn, improves speed and reliability, and smooths the developer experience.

  • You don’t have to worry about database-toppling traffic spikes.

  • There’s no need to manage database server software or backups.

  • You can use version control software to manage and track changes to your content.

  • Since your site is static, you can host your site with a content delivery network that scales with your site’s traffic.

Gatsby is not just for creating static sites. Gatsby is fully capable of generating a PWA with all the things we think that a modern web app can do, including auth, dynamic interactions, fetching data etc.

gatsby3.JPG

Gatsby does this by generating the static content using React DOM server-side APIs. Once this basic HTML is generated by Gatsby, React picks up where we left off. That basically means that Gatsby renders as much, upfront, as possible statically then client side React picks up and now we can do whatever a traditional React web app can do.

Why use Gatsby ?

Arguably one of the biggest gains that you get with Gatsby, because it is generating a static site, is going to be the speed.

It is going to be way faster than many of the alternatives, even compared to cached sites using WordPress and things like that because that static site is really hard to beat in terms of its speed and performance.

Also because of the static nature and just shipping HTML files this is going to be inherently more secure.

Gatsby can be used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. It makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.

Did you find this article valuable?

Support Kushagra Sharma by becoming a sponsor. Any amount is appreciated!