What is GatsbyJS?

Get introduced to GatsbyJS and learn about static and dynamic sites.

Gatsby is a JavaScript user interface (UI) framework, introduced by developer Kyle Mathews in 2015. It is a React-based static site generator that creates blazingly fast websites and web applications. Recently it has become more than just a static site generator; it now includes all the essentials we need to create modern websites, such as plugins, themes, and recipes.

Naturally, the next question is: what are static sites and static site generators?

The Gatsby logo

Static and dynamic sites

Let’s learn about static and dynamic sites and static site generators.

Static sites

Static sites serve server-side pre-built HTML and CSS pages to the browser. This means that all the files and assets needed by the browser and user are already built by the server, and it waits for us to request them.

Dynamic sites

Dynamic sites, on the other hand, are sites that build pages using server-side scripting like PHP at the time of the request. Then, they serve web pages with different content to the user on the fly.

For this reason, static sites load web pages faster. The pages already exist statically before they are requested, and the server doesn’t need to run complex and time-taking server-side scripts like in dynamic sites. Static sites are also easier, faster, and cheaper to build and maintain.

Static site generators

A static site generator takes in data, content, and templates. It then processes them, and gives us a folder of all the built pages and assets. A static site generator does all thise in advance so that the view is ready to be served ahead of time. So we don’t have to wait for it to be generated when we request it.

This, in essence, is what Gatsby does—but there’s much more too!