Gatsby JS

Gatsby.js is a web framework that works on the basis of React and GraphQL.

14 January 2021

What is Gatsby JS

Gatsby.js is a web framework that runs on React and GraphQL.

It is called a static page generator because it creates static HTML, CSS, and JS files. They are returned by the server when the page is loaded, without any additional queries or scripts. It is also possible to generate pages with dynamically changing content. This allows real-time data to be downloaded from the server.

Thanks to these advantages, companies such as IBM, Spotify, Braun or even the CIA decided to build their websites based on Gatsby.

Speed, performance and optimization

Loading the page due to static files is very fast because it is not rendered on the user's side in the browser.

The content of the page is created during the compilation of the project carried out by the creators of a given product, and the latest data is also downloaded at this point.

Initially, only the basic elements that guarantee the correct display of the page in the browser are loaded. Only then, after performing the interaction, the content for the remaining subpages is loaded.

This also translates into smooth movement on the website as there is no need to download it completely from the server.

The problem of loading photos has been solved by a dedicated gatsby-image library, thanks to which an image with the smallest possible weight matching the device is generated

They also managed to eliminate the problem of jumping content on the page - large images initially take the form of placeholders to ensure the correct layout on the page

To make the whole process of building the website even more efficient, it is possible to use a dedicated tool - Gatsby Cloud (you can read more about it in the article - link to Mariola's article)

Downloading data from several sources at the same time

The data we want to display on the website can come from any sources such as Headless CMS, Markdown or API queries. In Gatsby, we can display them simultaneously.

An undoubted advantage is the ability to use GraphQL technology, which allows you to download only the data you need, which translates into product performance.

It is also possible to download data dynamically while the page is displayed, e.g. using Axios

SEO

Rendering static HTML files allows robots to read the entire content of the page, which translates into full indexing by search engines

Over 2,500 plugins

This framework has an extensive set of dedicated plugins that ensure high performance and significantly accelerate the implementation of solutions

CMS integrations

The creators took care of integration with many CMSs, including a large part of the headless ones, among them we will find such products as: Contentful, DatoCMS (link), Strapi, or CraftCMS (link).

See the full list at:
https://www.gatsbyjs.com/docs/...