GatsbyJS is framework for generating static webpages written in React and GraphQL. In this post I’m going to tell you why I think GatsbyJS is one of the most interesting things that came out recently.

Efficiency

Before I start, I should tell you that I am a big fan of efficiency. What I mean when I am referring to something as being efficient? When something is efficient, it gets the job done with the minimum possible resources needed. In computer science, an efficient programming language is, for example, C/C++/Rust. Why? Because these languages compile the code to instructions which do exactly what my program claim to do. It does, what you tell it to does.

Another, high-level languages such as Java, Python, Ruby and so on make a lot of things at the runtime which are not connected with the things you want a computer to do - a garbage collection for example. And I’m not saying garbage collection is bad - it’s efficient from another point of view - from the programmer’s point of view. The code is safer and written faster. But the instructions, however, are not doing efficient work.

Server efficiency

When I hear PHP, I imagine apache server running somewhere on the server along with MySQL or Postgres database. If your server has a lot of traffic, utilization is high and your server is not wasting the time in an idle state - then everything is fine. But when utilization is low and the server is running at a day for a few users and at a night is running for no one - then we can’t say it is efficient.

Don’t waste resources

This is why I like “pay for what you use” or “serve when needed” or “lazy load” approach for technologies. By the way, this is what the “serverless” movement is all about - pay only for what you are using and do not waste resources (money and compute time). So what has gatsby in common with this approach? The Gatsby approach doesn’t need any running server and database at all. All it needs to have is online storage for HTML and javascript files - so it doesn’t need a running server to be constantly ready to serve you pages (unlike Wordpress). This is so minimalistic and efficient, that I fell in love with that as soon as I understood the static web page approach.

By generating static files and storing them, with the growing audience and number of requests for these files, you can easily scale - for example by caching the files at the Cloudfront or different service. Mainly said, optimizing performance by serving files is much easier than optimizing the performance of your servers - by replicating physical server nodes, running multiple processes, load balancing and so on. It is not even harder but costs more money, resources and it requires a lot more work to do it the right way. It brings much more complications when your server eventually shut down, looking for a bug is a pain in the ass.

Gatsby

As you guessed correctly, Gatsby is a static page generator using React and GraphQL. React by itself, when implemented correctly, is really really fast and provides the best possible user experience.

Plugins

GatsbyJS offers dozens of plugins solving different problems and optimizations including working with files, images, css/scss files, converting markdowns and offline support.

Starters

Don’t know how your site should look? You are lazy to start out from the scratch? Don’t worry. There are dozens of starters and all you have to do is type

$ gatsby new {STARTER_NAME OR STARTER_URL}

After command being hit everything is going to be downloaded and installed for you. After setup is complete, get into newly created directory (named after your starter name) and run the command below:

$ gatsby develop

You can see that gatsby started to getting your project ready for development. After that, Gatsby will write localhost link (with port) where you can go and see your website.

Files split + prerendering

If you have ever worked with React, you noticed that by default, one giant bundle was produced which served your javascript application - generating pages from javascript. However, this is not only unnecessary but it’s not efficient from SEO (Search Engine Optimization) point of view. When a user has a slow internet connection, bundle loading can last more than 5 seconds. It’s more than possible, the user will lose interest when waiting another few seconds.

Gatsby solves this problem with splitting pages into different files and prerendering these javascript React files into static HTML pages. The user sees content as soon as possible and we’ve just won a possible customer who would otherwise lose interest and would leave our page. This is also another case of efficiency because a user doesn’t want to see your whole blog/site. He just found your link somewhere or your page popped up in search engine and he wants to see a particular page. If splitting wasn’t the case, the whole site is downloaded straight to the user’s computer, which is not efficient and it is time and resource consuming.

A faster page equals a better score in the search engine

According to webmasters.googleblog from 2010, Google started to rank faster pages higher, so users have a better experience while visiting faster websites. Gatsby is not only trying to get first meaningful content to the user as soon as possible but while the user browsing the site, gatsby with its single page application concept solves another interaction with the site blazingly fast.

Have you ever clicked on the button or navigation and waited another few seconds for a site to load? Well, try that with Gatsby and see the power of React behind it. I promise the interaction will be instant!

Disadvantage of Gatsby

While Gatsby is super powerful, it brings one main disadvantage and it’s a writer experience. To set up the site, customize styling and write content you need to know basics of React and GraphQL, working with terminal console and to know how to get page built and deployed right into the hosting platform (where your files will be served).

A writer, when using Wordpress, Medium or Blogger doesn’t have to learn anything but simply gets things done quickly. With knowledge comes power - with knowing how to operate with Gatsby, you gain a lot of flexibility and freedom and you are free to do anything.