Becoming Great with Gatsby.js

Gatsby Ilustration
@indigital

If you want to try yourself with one of the most popular Javascript frameworks, why don't you go with Gatsby.js?

About Gatsby.js

According to Gatsby.js website it is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Although developers tend to classify Gatsby as static site generation framework, it offers much more including being Progressive Web Application. Long story short, Gatsby is a static site generator that leverages React.

But what is a static site?

Static sites seem to be nothing other than just the original website including HTML, CSS and some part of Javascript itself. There is no background - no database, no server and as a result they are not being rendered when being run.

While a static site generator is an instrument to generate them, Javascript frameworks usually are used to generate HTML content on the client side during runtime. On the other hand, static sites generators do the same thing when building an app. As a result, after loading, we receive SPA (Single-Page-Application) backed by React.

Why Gatsby?

There are some serious pros of Gatsby which let him stand out from the crowd of static site generators.

To start with, as mentioned above, Gatsby.js leverages React! If you are fine with that, you won't find any better solutions, so go for it.

Secondly, and probably the most importantly, Gatsby gives you great flexibility. Ability to scale up is one of the most powerful features of this framework. Don't believe in words that Gatsby is dedicated to small apps as it is completely inversely. There are plenty of large and dynamic projects which use Gatsby.

Last but not the least, Gatsby makes use of GraphQL with its amazing gatsby-source-graphql which allows us to connect to any third-party GraphQL API far faster than before. Think of exposing CMS GraphQL API instead of the JSON API. Results? Less parsing done thanks to Gatsby.

On the top of that, Gatsby has a great number of components that simplify developer's daily issues like routing, linking, and handling images, and note that these features are not the part of the core React library.

SEO friendly

Gatsby.js ecosystem was developed in the way that its ease to configure search engine optimization is one of the greatest added values.

Gatsby.js + CMS Cockpit

Gatsby works great with CMS Cockpit - an api-driven powerful Content Management Platform. You will definitely learn more from us about this system in the near future, so stay tuned and await new blog post.

It's crucial and necessary to use CockpitQL - the addon which enables to use GraphQL instead of REST API. Furthermore, we strongly recommend using LayoutComponents addon whose main feature is the possibility to create components similar to the ones you may find in Wordpress

CMS Cockpit panel

Do not forget to implement gatsby-source-graphql plugin which requires GraphQL URL from CMS Cockpit. Note that the URL parameter structure goes in this way: http://localhost/cockpit/api/graphql/query?token=

GraphQL parameter

Willing to start?

Perhaps, if you decided to read this article, you are more familiar with Gatsby.js and the subject somehow interested you. If you have background in Javascript frameworks, it should be easy to start your journey with Great Gatsby.js and check both its advantages and disadvantages. If your goal is to build fast and well SEO prepared websites with lack of unimportant code - you should definitely go for it

I hope this article helped you learn more about Gatsby.js, but please, do not forget, learning is an active process.

Insights for you

UX tips for 2020 ilustration

User Experience

Why should we experience users’ activities? UX Protips for 2020
calendar icon

We will introduce you to 10 UX tips and tricks on user experience prototyping in 2020.

more

Real estate

How to step out on the real estate market?
calendar icon

Being recognizable among potential customers is crucial on the saturated market, isn't it?

more

Marketing Automation

Real estate marketing
calendar icon

more

Let's rock together!

Your business is our responsibility and we do our best to achieve the best possible solution.

Let’s find out how we may help you grow.