Introduction to Gatsby Framework (and JAMstack Overview)

Gatsby is a front-end (and also backend) framework built with React for Static/dynamic websites. You can view the gatsby official website at gatsbyjs.com.

We can create a website using Reactjs from scratch but it would take a long time for the initial setup. Gatsby Framework helps you save your time in terms of page routing, automation, plugins, creating serverless functions, etc.

Here in this course, we use to combine Gatsby Framework with different stacks e.g. Sanity for the data/CMS layer; Stripe to process the payment. All of these services (e.g. Sanity, Stripe) are decoupled (separate) from each other and we can intercommunicate with each other through the API route. This is what JAMstack teaches us...

JAMstack is the modern way to build a website by providing a simpler developer experience, better performance, lower cost, and greater scalability.

In JAMstack, the front-end (Gatsbyjs in our case) is decoupled from the back-end which means that server-side logic is not integrated into the client-side logic(Gatsbyjs in our case). As in our case, we have Gatsbyjs as frontend/backend, Stripe as payment processing, and Sanity as backend data/CMS layer.

We can categorize the front-end from the back-end as below.

1. The front-end is related to what users look into the browser website. For example, header, animation, sidebar, styles, etc. We can use HTML, CSS, and Javascript to write the front-end logic.
2. In the backend, the server-side logic runs. For example, create, read, and delete operations from the database. We can use Node.js, Ruby on Rails, PHP, etc programming languages to write server-side logic.

In the next section, we'll find out how it's better to choose Gatsbyjs.