3 reasons why you should consider Gatsby.js for your next project

As developers, we are on the constant lookout for new best friends aka new technologies with which we can enhance our tech-stack to be even more practical and powerful.
The best way to review possible candidates is by doing some research, working through tutorials, and finally integrating them into one of our projects.

A hot contestant this year is Gatsby.js, a static site generator. Numerous people recommended Gatsby in 2018, so the chances are high that you've already heard about or took a look at it. It's based on React.js, Webpack, as well as other frontend tools and uses GraphQL to feed your website with data.

Want to know why it's so popular? Read on and learn about the 3 reasons why you should consider Gatsby.js for your next project.

1. Built with performance in mind

What do web developers and users have in common? They both hate slow websites! We sometimes have to face fierce battles to get our sites just a few milliseconds faster. Most of us don't want to spend precious time on this tedious task. But let me tell you something great: Gatsby.js is super fast. I mean like, extremely fast. Take a look at the sites in this showcase.

Gatsby sites are 2-3 times faster than similar types of sites. The framework takes care of performance on its own, leaving you with the pleasure of working on something more fun. All you have to do is to create the source code, and Gatsby.js will then compile the most performant Webpack configuration to build your site. Additionally, it prefetches resources so clicking through your pages feels excitingly fast. If you want to learn more about how and why the creators of Gatsby are doing this, you can read more here.

Gatsby follows Google's PRPL architectural pattern which aims to boost your website's performance, especially on mobile devices.

PRPL stands for:

• Push
• Render
• Pre-cache
• Lazy-load

The pattern is for structuring and serving progressive web apps (PWAs), and yes, you can create PWAs with Gatsby.js. All you have to do: Make sure to run your page via HTTPS and install a plugin for the manifest and service worker. Gatsby already meets all other requirements for PWAs out of the box.

2. Based on popular and influential technology

Gatsby is based on React.js which is a JavaScript library for building User Interfaces using components. It's relatively easy to learn, and if you're able to write solid JavaScript code, you're good to go. Gatsby aims to behave like a regular React application and uses its components which you can reuse and share throughout your project.

Of course, you will have to write some HTML and CSS as well to make your website look pleasant. You have various options to include styling into your Gatsby site, and you can learn more about the possibilities in this Gatsby tutorial.

Also, this is your chance to finally start working with GraphQL if you haven't done so already! GraphQL is a query language with which you can fetch data from nearly any source. One of its most powerful features is its ability to get only the data you ask for— you decide what you want and need, not the server/source. Therefore, Gatsby doesn't need a classic backend and GraphQL lets you query all necessary data from wherever you want: markdown files, databases, Storyblok, traditional CMSs like Drupal and so on.

You can find a useful feature table on Gatsby.js's website with more technological benefits to explore:

3. Fun to use and learn

One obstacle we're facing while learning new technologies is how much time it takes us to get to know them accurately. Luckily, Gatsby.js is built on some pretty popular tech, so you might not need to learn everything from scratch. Also, if you've never worked with React or GraphQL before, don't worry! Gatsby provides you with the perfect opportunity to master them. You can find well-written tutorials here on their website which will get you started in no time.

Will you enjoy working with Gatsby.js? If the facts and advantages above aren't convincing you yet: Yes, I think you'll have a great time realizing your projects with Gatsby.js. You'll get stuff done pretty fast. Setting up a new project is like a walk in the park: Gatsby has already pre-configured your project, so you can immediately dive into developing your site. It sure feels good starting a project without the usual setup and configuration problems!

Although Gatsby is one of the new kids in the group of frontend frameworks and libraries, it has a vast and active community. If you're looking for tutorials, you don't have to search forever; Do you prefer video over text or need some advanced and in-depth articles? The community has got you covered! You can also find many people who are eager to help on Twitter, Stack Overflow and the likes.

Looking into the future of Gatsby.js

I am no fortune teller, but I think Gatsby.js has a great future ahead of it! Gatsby.js V1 first released in 2017 (V2 got published only a few months ago) but already has countless fans and proved the world that it's not just hype. In general, we will see people using static site generators more often in the future. The need for performant, fast to build but top-notch quality websites and PWAs is on the rise. The people from Gatsby made the right choices by integrating specific technologies into their framework as well as concentrating on performance—they made Gatsby.js future-proof.

Want to learn how to use Storyblok and Gatsby.js together?

Read this step by step guide, where you will get a Gatsby website using Storyblok's API for multilanguage content and true live preview.