Gatsby will leave you SPEECHLESS

Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps. Owing to the fast performance of the sites it powers, impressive out-of-the-box features like code splitting, and friendly developer experience, Gatsby is fast becoming a staple of modern web development.

Why am I writing about Gatsby today? Well, I will tell you, and I will also tell you my experience and some of the challenges I encountered developing with this awesome framework.

In September, 2021, I got a project through my mentor, to build an online/offline learning app for a company in Nigeria. And the platform of choice was Gatsby… Gatsby? Why Gatsby? Why not React that I've been working with since. What is even Gatsby? hahaha… So many questions at once, don't blame me, it was the first time hearing about Gatsby and I was barely 7 months old in my development (with JavaScript) career.

My mentor said - "don't worry it's like React and it's easy to use if you are familiar with React. Just make some research and read the documentation". That was how my journey to working with this awesome framework started and I don't regret it at all.

Why would you need a framework on top of a framework (or library)?

Isn’t React supposed to help developers build websites and apps?

React is a library that is meant to provide a certain set of core functionality for developers to leverage. It is intended to be lightweight and broadly applicable. GatsbyJS, on the other hand, is a static progressive web app (PWA) generator that offers code and data splitting out of the box.

To boost performance, GatsbyJS loads only critical HTML, CSS, JavaScript, and other data. Once loaded, it prefetches resources for other pages you might navigate to. This way, your site loads as fast as possible and user interactions feel seamless. To understand GatsbyJS, you need to understand "Static Sites" and "Static Site Generators".

What are static sites?

Static sites have been around for a very long time. In fact, they are probably the original website: just HTML, CSS, and JavaScript. They are not rendered during runtime; there is no server-side code, no database, etc. If you come across a plain HTML page that has been sitting on a server since the mid 1990s, you’ve found a static website.

A static site generator is a tool that generates static sites. With regard to JS frameworks and libraries, these usually generate HTML content on the client side during runtime. Static site generators generate this content during build time. Then, once loaded, React takes over, and you have a single-page application!

How is this different from server-side rendering? This is a great question. The main difference is that there is no server-side code. So, unlike a tool such as Next.js, Gatsby does not render anything on the server when a request is made. This is all done at build time of the application.

What makes Gatsby special?

Some of the benefits of a static site are: speed, search engine optimization, and security. Not only are sites made with Gatsby blazing fast, but they have an implicit security since there is no database or server, and unlike standard React applications, they make SEO much easier since crawlers can find the content.

Gatsby has some great features that differentiate it from other static site generators.

• Fast no-reload page changes, 100 points possible in PageSpeed
• Build sites with React.js components
• Hot reload editing. Tweak pages, templates, and styles and see changes in real time.
• A vast library of plugins to speed up development process
• Easily connect your app with a headless CMS and fetch data with inbuild GraphQL
• Gatsby also provides a wealth of APIs that make the development of static sites much easier — for example, the createPage API that makes it really easy to transform markdown files into static pages with a template at build time.
• Gatsby has a bunch of great components that simplify things like routing, linking, and handling images, which are not included in the core React library.
• Easy to deploy to Netlify, Vercel e.t.c. and also setup Continuous Integration (CI)/Continuous Deploy(CD)

You’re currently visiting a website powered by Gatsby…

The “JAMstack”

Static site generators enable a type of web architecture referred to as the “JAMstack,” a portmanteau of “JavaScript, APIs, and Markup” and a modern take on structuring the different resources required to host and serve web content.

“JAM” stands for:

• J - the code (JavaScript)
• A - the site infrastructure (APIs)
• M - and the content (Markup).

Gatsby happen to be the forerunner of JAMstack. To learn more about JAMstack visit JAMstack.org

Getting started with GatsbyJS

To get started using GatsbyJS, open your terminal (I use VS code terminal most of the time) and run: npm i -g gatsby. This command-line tool enables you to generate, run, and build a Gatsby application.

To get up and running quickly, you can use the Gatsby default starter repository. or any of their starter templates. After cloning this, cd into the project root directory and run: npm install in your terminal and then gatsby develop to start the server. This will generate a fully active Gatsby application running on http://localhost:8000.

To confirm that pages have already been rendered, you can visit any of the pages and click View source. Note, though, that you can also click links and the page will update without a full refresh, as you would expect from a PWA.

The best way to learn a framework or language is to first read the documentation. Without any further ado, head up to the documentation to learn more.

Conclusion

The project was a really good one and I learnt a lot from building it. The Frontend of course is developed with Gatsby while we used Strapi to serve the Backend. You can view the project here .

Before I end this post, I'd like to point out few challenges I encountered in this project;

Caching: An important part of creating a very fast website is setting up proper HTTP caching. HTTP caching allows browsers to cache resources from a website so that when the user returns to a site, very few parts of the website have to be downloaded. This is very good but I noticed that most of the changes made in the backend don't get updated on the frontend quickly because of the caching system of gatsby. To load latest content I usually clear the cache buy running gatsby clean in the terminal. It took me a little time to figure this out.

Rehydration Error: I wrote a post about this, "Rehydration Error in Gatsby" .

I will keep updating this post as I build more projects with Gatsby and also the challenges and how to I solved them.

I hope you enjoyed this post. Don't forget to follow me on socials and also share this post to your timeline… Gracias 😎