Blog 15 - Gatsby

What is Gatsby?

Gatsby is an open-source framework for constructing static webpages and apps that integrates features from React, GraphQL, and Webpack into a single tool. Gatsby is quickly becoming a standard of modern web development because to the rapid speed of the sites it supports, great out-of-the-box capabilities like code splitting, and a nice developer experience. I had actually come across Gatsby while researching more information about React.js and didn't realize that there were more prats that were branching out from React itself.

What are the differences between Gatsby and React?

When trying to work with front end development you may wonder what are the differences between using React and Gatsby. React is a library that is designed to give developers with a set of essential functions. It's designed to be simple to use and adaptable to a wide range of situations. A reason someone may want to use React is when you want to create websites that provide and do different functions for users. You may also want to use React when trying to create interactive websites as well. GatsbyJS, on the other hand, is a static progressive web app (PWA) generator that comes pre-loaded with code and data splitting. Using something like Gatsby is much closer to making a regular HTML page just HTML, CSS, and JavaScript. It doesn't require any servers as they are just static websites.

Why should you use Gatsby?

Gatsby comes has a robust ecosystem of plugins to meet a variety of requirements. These plugins can assist you in obtaining data from CMSs such as WordPress or Contentful, integrating with programs such as Algolia, and managing your photos by lazy-loading and optimizing them. Gatsby also includes a number of APIs that make creating static sites much easier, such as the createPage API, which makes converting markdown files into static pages with a template at build time a breeze. Finally, Gatsby includes a number of useful components that ease tasks such as routing, linking, and image handling that aren't available in the main React library.