How Gatsby.Js Helps Solve Web Development Challenges

They’re a great option thanks to their component nature but there are also additional features that make them a solution worth trying. Our developers work intensively with some of them every day, and one of their favorites is Gatsby.js.

No wonder – Gatsby is a really powerful React framework! Read on to see how it can help you solve most common web development challenges.

What is Gatsby JS?

Gatsby.js is an open-source static site generator built on top of React, GraphQL, and Node.js. It was initially designed to generate static HTML pages and provide high performance. Over the years, Gatsby has evolved and now combines the speed of HTML static pages with smart tricks like prefetching critical assets on the first load. Today, Gatsby.js is more of a React meta-framework that enables developers to build both static pages and dynamic applications.

Static vs dynamic websites and apps is an issue of its own kind. If you don’t know the difference, take a look at our article, in which we dug into this topic a little bit.

Some data: in the last Jamstack Community Survey, 28% of Jamstack developers stated they use Gatsby, making it one of the most popular frameworks.

Solving common web development problems with Gatsby.js

Using monolithic architecture, instead of the Jamstack approach, can come with plenty of challenges, like SEO issues, problematic content management or unsatisfying page speed, which according to the importance of Core Web Vitals for Google, has an impact (negative, of course) on SEO too! Why is WordPress slow? We dig into this topic thoroughly!

Let’s focus here on how our framework of choice, Gatsby JS, can help us solve these common web development issues.

Optimizing website speed and performance

The creators of Gatsby know their business and the importance of page speed, so even in official documentation we have plenty of tips for improving website performance. For quick wins we can for example:

• reduce blocking calls & third-party scripts,

• work with JavaScript bundle size,

• look at stylesheets, font files, images and all media for possible optimization points,

• review our resource requests & CDN caching configuration.

Seems quite familiar, huh? It can as the core of improving website speed is the same for most tools used, but Gatsby is definitely keeping up with the times making everything a little easier. It's perfectly compatible with most popular performance-checking tools which make implementing changes pretty straightforward to check and monitor their effectiveness. 

Gatsby plugins are also doing a lot of optimization work for us, under the hood. So in docs, we can very often find a tip scheme like “if you’re using the tool X – use a Gatsby plugin for it for better speed, performance and mostly-everything optimization”.

The perfect example is Gatsby’s plugin for handling images (Gatsby Plugin Image) which makes some crucial improvements automatically:

• it delays loading images not above the fold, so everything out of user’s first sight doesn’t impact the page speed,

• it provides lazy loading and smooth, blurred placeholders before images are fetched,

• it shortens the request time by minimizing image file size.

So many benefits for so little effort as just using the plugin seems like an instant win, isn’t it? Yet, it’s good to know plugins aren’t always the perfect solution because they can limit performance factors significantly.

Simplifying content management

In the best headless CMS approach using Gatsby JS, we take into consideration your business’ specific needs and personal/aesthetic preferences. Gatsby is offering pretty good support and compatibility here too, making the choice mainly a matter of preferences, not any kind of need, pressure or obligation. Editing content with those tools is as simple as it only can be, making the process easier for your non-technical staff.

As a preachers of the #goHeadless approach and a proud partner, we recommend taking a glimpse at Sanity and Storyblok, as they are perfect for most cases we met on the road. If you don’t know which one would match your business the best, we’re open to talk, as we already implemented numerous projects using different kinds of headless CMS solutions.

Enhancing SEO capabilities

SEO is one of the crucial web parameters, as, in the simplest of terms, it just optimizes your visibility online. Everybody wants to be visible for users and customers, so there is no single doubt, this has the highest business priority to handle this topic properly.

And Gatsby does it, basically, by its nature of being static in every place you don’t need extraordinary dynamic features. Google strongly recommends being static to get content indexed rapidly (source) and using Gatsby, you’re meeting this by simply doing nothing, as the Static Site Generation (SSG) is the basic and the most common pages render strategy you would like to use.

Although, you still have the possibility to use different strategies, not infecting SEO that much, as they are high-class optimized in the matter of page speed and robot indexation. And additionally due to super-good user experience and higher interactivity with the website, you can increase other valid factors like dwell and session times, so in the final calculation, we’re still in green here.

Gatsby JS also offers some additional ways of boosting the website’s SEO, as Gatsby’s SEO component and Gatsby React Helmet. These tools let us control metadata in more detail, enhancing our Search Engine Optimization possibilities, so we don’t have to rely only on defaults or automatized plugins configurations.

When should you use Gatsby.js

Coming from the basics, use Gatsby JS if you need a full ecosystem to make React development services easier, with less effort, and solve some root web development issues for you under the hood. It will provide us with a huge amount of benefits, for business and development as well as for users and receivers of our content.

Long story short, Gatsby is the perfect solution if you don’t need huge customization in data fetching and you don’t mind using GraphQL which is natural for Gatsby development.

Full customization is not a must-have to create fast, simple and SEO-friendly static sites. Sometimes it can even provide more confusion than needed.

Gatsby will be a perfect choice for quickly developed websites with small amounts of dynamic, live-updated data and don’t require complex data fetching structures. It’s a perfect solution for personal blogs, custom landing pages or small corporate websites where it can show its full potential as a tool evolved from a static site generator that handles its basic function in the best way possible.

However, if you need more insight into this topic, we dig deeper into this in another article.

Successful websites examples built with Gatsby.js

If you have a little rummage, you’ll easily find many successful websites built with Gatsby.js. Let’s start with very popular IT brands like Figma or even ReactJS itself. Those pages achieved stunning page speed results, not going below 95 on mobiles in the Lighthouse – that’s the superpower of the static site generators Gatsby evolved from!

Another very identifiable brand, National Geographic, has a page full of stunning, high-resolution photos they are so recognizable from with only a small loss to previous ones, getting stable, cut-and-dried 100 on the desktop. You don’t have to believe just in words, as you can check more examples in the Gatsby's official showcase.

We also aim to create successful pages using Gatsby, so we used it in some of our projects. In the Dajemy Slowo project we appreciated its compatibility with many popular web technologies. We were able to load websites around 6 seconds faster than in cases of any traditional counterparts and the previous monolithic solution we migrated from.

Thanks to prerendering and some built-in features, we achieved pretty good page speed results. This was important because of the huge impact of animations the client was heavily urged to have (no wonder: they’re really cool; simply look at them!). The data changes were not to be very dynamic, so Gatsby turned out to be a perfect solution in this case.

We used Gatsby also for Etno Cafe’s corporate website project. It was a perfect match that let us build a fast, well-performing site without being forced to decide between their stunning, high-resolution graphics and SEO friendliness. They simply went hand in hand.

Improve your development workflow with Gatsby.js

Gatsby, in default, offers run time and build time environments, which makes developing sites smooth and streamlines the process, making everything quicker, easier, and more predictable, even working in bigger teams. Using them comes naturally. Working locally in run time, developers can see their changes live which increases the development speed dramatically. Then, after building the site, we can host its lighter bundled version, being available for business, customers and search engines, and being cheaper to maintain as well.

We can additionally improve development workflow with Gatsby JS using the Gatsby cloud which offers plenty of top-notch features:

• Workflow based on Git, which lets us configure the whole workflow like bundling, building, and publishing a site and run it with a single git push to a repository

• Some useful features build-in into Gatsby Cloud’s CI/CD, like Lighthouse performance reports which can simplify SEO optimization even more

• Deploy previews, which let to verify the newest features with the business on every stage of work, not only on production and eventually a staging environment

• Atomic builds and auto-rollbacks in case of unexpected problems after deploying changes to the production

• CMS previews which let the non-technical content creator preview their work before publishing and simplified integrations with mostly used CMSes

• Incremental builds unblocking the whole rendering magic of Gatsby like intelligent optimization and caching at all levels reducing build times by – as declared by its creators – up to 90%

You now know what is Gastby.js! Why Should You Use It Too?

Gatsby.js is a pretty helpful framework and we recommend it to our clients frequently, among other React frameworks we’re happy to use for custom and Jamstack web development projects.

Think your digital platform would benefit from being fueled by Gatsby? Just drop us a line, tell us about your project needs, and we’ll easily come up with the solution.