Gatsby vs React: When, why, and how.

Gatsby builds on React, so if you know React you can jump into Gatsby easily. Even though the syntax is mostly the same, Gatsby and React are suited for completely different purposes. Gatsby excels at search engine optimization (SEOs), where Create React App is lacking, while React excels at dynamic content and interactive application creation where Gatsby won't work at all. The demands of the project should dictate what tool you use and, if needed, you can have both at once. Today we will go over when, why, and how to choose and use each tool.

Skip to When to use Gatsby

What is Gatsby

Gatsby is a Static Site Generator (SSG) that uses React to create static web pages. These are pages that are built and served on a Content Delivery Network (CDN), load stupidly fast ™, are a breeze to set up, and have an inordinate amount of plugins that just make the whole experience fascinating. I hopped on Gatsby soon after learning React and I have loved how the whole ecosystem makes it easy to integrate and how great it is at what it does.

Gatsby Baseline Benefits

You can create a git repo, open a Netlify account and have your page up an running in less than 5 minutes. Gatsby offers starters which are templates with some functionality right from the start, but building your own page from their standard starter is easy enough as it is and it easier to add on features than to remove them. Using Netlify you have continuous deployment for free, meaning that your page will have zero downtime and you can even have deploy previews to test any possibly breaking changes.

If it is not clear enough yet, I am a huge Gatsby fan.

When to use Gatsby

The main reason to use Gatsby is when SEO is important for your webpage. If you need to appear in google searches and get indexed better by crawlers, Gatsby is you tool. Gatsby plugins make it incredibly easy to handle image optimization, PWA functionality, integrating Google Analytics, converting markdown into content, creating meta-tags for SEO Optimization. With very few lines of code, and some easy configurations you can get all of these benefits without doing much.

Why use Gatsby

If you want to create a Landing Page for a business or product, create a blog, or even create an e-commerce website, Gatsby will give you the tools to have the online presence that is mission critical for any of these cases. In this day and age your page needs to be light, fast, mobile-friendly, and easy to find, which is just what you get when you jump into Gatsby.

A great way to tell how your page ranks on these aspects is to run a lighthouse audit. On Chrome just launch your dev tools f12 and go to the Lighthouse tab and run an audit. Lighthouse will test your page on loading speed, offline capabilities, how it would fare on mobile networks and slow networks, if it is PWA ready, and another handful of things. It will not just rank you, but it will give you tips on how you can improve your page. If you have developer extensions installed, run the audit in incognito mode.

When not to use Gatsby

If you want to build a service that is highly dependent on user interaction changing data, fetching data from Databases and dynamically displaying the content, go for React. Sometimes web-applications behind a sing-up wall, have no SEO concerns. Since Create React App does Client Side Rendering (CSR), any web crawler indexing for your page will get an empty page that will then create the content, making it harder to crawl and index for.

Some web applications like social-media apps, and SaaS apps, are not viable using Gatsby because Gatsby would have to build the entire web-page every time something changes, and then serve it. This would be lousy UX and by the time one build finished and served, about 100 more builds would be in line.

Why not both?

You can mix things up using Gatsby by having some parts of your page be static for SEO benefits, and some dynamic to diminish build count. One example would be a page with articles where Gatsby builds whenever a new article is submitted, but saves the comments in a database and fetches them dynamically on the article.

Something else that is entirely possible, is to create a landing page for your app or software and then serve the Client Side Rendered functional app on a URL path such as ..walrusfishradar.com/app/. You can also have the app in a different subdomain such as app.walrusfishradar.com/. This way you can make your page SEO friendly and accessible where it matters, and have a fully fledged 100% CSR application in the same CDN.

The JAM Stack

If you need a server to run your app you cannot use CDN's and get their speed benefits and ease of use. However, there is also an option here: serve your website and web app using a CDN and host your server somewhere else or go serverless. Your web page would live on the CDN and your server would be used as an API, and you can integrate with as many third party services and APIs as you want. Gatsby and CRA can be mixed together to create a great JAM stack page/app for any need.

How to use Gatsby

If you know React, you are 90% of the way there, if you know GraphQL you are 95% of the way there. The Gatsby DOCS are great, and since it is so widely used almost anything you can think of has been asked or there is a video on it. If your project needs to optimize SEOs and give a snappy and fast UX to get the boost it needs, don't hesitate and jump into Gatsby.

The complexity of GraphQL used by Gatsby is minimal because the hard part (building queries) is done for you, you just jump into the GraphQL playground yourpage.com/___graphql and test your queries and then copy and paste them into your page. I will definitely be writing more about Gatsby and diving in to how to do specific things in it.

Conclusion

Gatsby and Create React App are polar opposites: one is pure client side work, the other is static generation. Where CRA is the Yang, Gatsby is the Yin. As Yin, Gatbsy builds pages before hand and represents everything that is known and ordered. As Yang, CRA is great for handling the unknown, and ever-changing chaos of User Interaction. Use Gatsby when you need speed, SEO optimization, and fantastic UX for showing YOUR page over a broad audience. Use React when your users are creating the content for your app very dynamically and it doesn't need to be indexed. Mix both and run the JAM Stack on the same CDN.