In A Nutshell: GatsbyJS

In A Nutshell: GatsbyJS

Hey y’all i’m back with blog writing once again after me and my team was really backed wu with a client projects and most of them all are with tighter deadlines and i couldn’t get much space to publish my posts. My team pretty much wrapped up most of them on time and couple of them were just slightly missed the deadline targets on the back of some fucking bugs killed our time on it. Anyways i just don’t want to kill your time on what was happened all those days just back of you.

So right here on this post i just want to bring down the “Nutshell” series back on track and this time i will be covering up the super powerful static site generator named “GatsbyJS”. So if you are already into Gatsby kind of thing and built few static site using it then you can skip this post as i won’t be going much deeper into it or i will be covering up with any of the advanced topic related to Gatsby.

Hey trust me that some of the developers already blown up themselves with it’s powerful performance including us and ever since it came into the scene it keeps on making good amount of noise day-in and day-out. As it is not just built for one of my favorite tech stack React, Webpack, GraphQL but the ideas it exposed me to make me want to create a lot of sites using this.

What is GatsbyJS?

Gatsby is a blazing fast static site generator which is build top on the React and GraphQL (which allows you to query your data however you want). And trust me if you are already into the React then this React + Gatsby is gonna be a magic combination for your site as straight away you got all the things you love about React, like composability, one-way binding, resuability and great environment.

Because of Gatsby now you can build a React app and get server side rendering automagically. Gatsby site is highly performant and performs prefetching because it gives you client side code splitting and lazy loading of assets. This means that Gatsby gives the browser a complete page as a single file.

Why use GatsbyJS?

Here at Themesfinity we absolutely love developing apps or sites using React and using a static site generators like Gatsby makes a real sense to me and saves lot of time and above all it improves your app/site performance dramatically. GatsbyJS helps us to build Progressive Web Apps (PWA) sites that have the smooth experience of a “native” app—using NodeJS, React, React-Router, Webpack, and a variety of plugins.

Gatsby is made to collect your data from wherever it may be: markdown, JSON, from your favorite CMS like WordPress, third party APIs, anywhere i mean from anywhere! And at build time, it creates an internal GraphQL server of all of this data. So in your react components, all of your data is queried at build time from that same place, in the same way through GraphQL. Another big richness of Gatsby is that it already having a fantastic documentation to get started with it and great number of starter theme available for free and you’re absolutely free to use it for performance and accessibility this why Gatsby is widely used among the JavaScript world.

We use Gatsby because it is powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box. I promise that you there will be a big smile on your face when you start to use Gatsby for your React apps and feel the difference.

As well know how complex is to build a modern JavaScript websites or webapps due to lot of configurations comes into play and this is where Gatsby coms into play and straight away simplifies everything by extracting configuration out of your site and moving it into the framework and community plugins.

Alternatives to GatsbyJS

Well there are some few static-site generators (SSG) are there and to be honest i haven’t used any of those apart from Gatsby till now. Still the most popular SSG, with a large user base and a big directory of plugins. It’s great for blogs and also widely used by e-commerce sites. For many days over the months thought to spin up some few other SSG’s such as Jekyll which is believed to be the second-best static site generator now. But never be able to dirt my hand with it. Where as my team of devs are sort of big fans of Jekyll as it enables you to write and manage content in markdown and just sit back and let Jekyll to the heavy lifting of putting your site together. And with GitHub pages you barely even have to run Jekyll locally to build a new site.

I’m not a big fan of Hugo either and i didn’t explored it too much but have played with it on very few accession. Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website. Hugo makes use of markdown files with front matter for meta data. As i recently heard they announced an advanced theming feature that offers a powerful way of building Hugo sites with reusable components.

Still there are plenty of static site generators available to use but we at Themesfinity we and our developers are truly blessed to use GatsbyJS. So before you choose to what SSG that you should use is always try to consider your project’s main goal. Not all static site generators are created for the same results, and you’ll save a lot of pain by choosing one that is specialized for what you’re trying to achieve.

GatsbyJS + JAMStack

At Themesfinity, we are totally a tech-agnostic – which gives us the freedom to explore the best possible solution for a situation instead of forcing a fit with a particular tech stack. So We choose JAMstack (JavaScript, APIs, and Markup), a modern web development architecture that offers faster performance, higher security, cheaper hosting options, and a better engineering experience.

Gatsby offers a different way of doing things. As you all know that Gatsby is a JavaScript-driven static site generator based on a powerful new concept called the JAMstack. The JAMstack, short for JavaScript, APIs, and Markup, is a new web architecture that upends the traditional means of serving a website by generating all the content (the markup, or HTML) necessary for the site to function ahead of time before the user ever makes a request. There are numerous benefits to building a website in this manner, such as a higher level of security, a simpler development workflow, and less expensive start-up costs.

The JAMstack isn’t a cure-all for every situation, though. Extremely large sites don’t benefit from static site generation; the build takes so long that it outweighs the improvement in load time.

Getting started with GatsbyJS

Here i’m going to drop out all the important links that will helps you in get started with Gatsby.

1. The setup for Gatsby is straightforward, check out the GatsbyJS Documentation. One npm install and then learn a couple of Gatsby commands, and you are all set.
2. Official tutorials are really excellent to explore as it illustrate concepts within Gatsby and how it does what it does GatsbyJS Tutorials
3. GatsbyJS Plugins Repo

Share the Post

About the Author

I’m the Founder & Lead Developer of Themesfinity and i’m very much passionate about WordPress, React, GraphQL and Serverless. I spend most of my time tweeting and writing code using VSCode and i’m too much addicted to coffeeholic.