Introduction to Gatsby Framework

Gatsby is a React framework used to build Static and dynamic websites.

React is a Javascript library used to build interactive UI components. React component is similar to writing HTML code inside of the Javascript function. Gatsby Framework provides tons of benefits out of the box e.g. page routing, automation, plugins, creating serverless functions, etc.

Below, we discuss the few benefits of using the Gatsby Framework.

Gatsby Plugins

The Gatsby official has a marketplace for thousands of plugins that we can use to add functionality to the website e.g. adding a sitemap to the website, adding sass support, optimizing images, etc.

Additionally, it provides a source plugin that we can use to fetch data from different resources at build time e.g. fetching data from WordPress, Google sheets, contentful, MDX, etc.

You can learn about the Gatsby plugin on the below page.

https://www.gatsbyjs.com/plugins

image

Gatsby GraphQL Data layer

Gatsby has the GraphQL data layer where we can query the build time data in the react component and functions. To access the Graphql data layer playground, we can develop the Gatsby Project and visit the browser on the below page.

  • http://localhost:8000/___graphql

The Graphql playground preview as below.

image

Gatsby Functions

The serverless functions are already built into Gatsby. The Gatsby serverless function is used to run the server function without running the server. To create a serverless function, we can create a javascript file at the src/api location. Then, the javascript file will serve as the API route in the browser. For example, we can create the file at the location src/api/hello-world.js and write the below code.

export default function handler(req, res) {
  res.status(200).json({ hello: `world` })
}

The hello-world.js file at the respective location gives the API response in the browser as below.

image

Fetching Data

We can use Gatsbyjs to fetch data both at build time and runtime.

In Gatsby js, We can use the source plugin to fetch the data at the build time and query the data from the GraphQL layer in the React component. This build-time data is static and does not change in real-time. The site in which data remains constant is the static site.

To fetch the data in real-time, we can use send the HTTP request to the API route using the fetch command. The response of fetching data in real-time might be slow as compared to the response of build time data.

Gatsby Rendering

The Gatsby framework supports three (3) rendering methods as mentioned.

  • Static Site Generation (SSG)
  • Deferred Static Generation (DSG)
  • Server-Side Rendering (SSR)

You can learn more about Gatsbyjs rendering method on this page.

There are a ton of more benefits that Gatsby provides out of the box, we just mentioned a few benefits.