Gatsby- A Blazing Fast Static Site Generator
Cloud, Recipes, Plugins, Themes, and much more!!
ByPayal Mittal
It’s not been very long since Gatsby came around. Strictly, 3 years. Its beta version was first released in 2017. And in such a short time period, it has gained a strong community and an enormous fan base.
As Gatsby is known as a mixture of some wonderful tech like React and GraphQL, if you’ve worked with them before it would be a fun experience for you to try out Gatsby and if you don’t, well then, it will be another benefit, you will learn a great deal about them.
Without knowing React and GraphQL, you might face difficulty learning Gatsby. But this is how everyone feels right before learning something new. Take it as a chance to learn them both without actually learning them.
So instead of learning one new technology, you would end up learning 3 of them. Excellent. Isn’t it?
Here, I’ll try to make it clear why it is worthwhile to try out Gatsby. We’ll discuss its features, specialties, working, ecosystem, and more. I hope that this blog, along with my ardent regards to Gatsby, will help you make up your mind.
What is Gatsby?
“Gatsby is a React-based, GraphQL powered, open-source framework for creating static websites and apps.”
In simple terms, it is a combo pack of all the best parts of ReactJS, GraphQL, Webpack, and other popular frontend-development tools and comes forth with a fantastic solution that every developer would love.
One of the best things about Gatsby is that it makes use of ReactJS which is the best tool today and this fact adds weight to its credibility.
It uses static rendering and precompilation features, resulting in faster page loads, code splitting, lazy loading, resource optimization, etc.
When I told one of my developer friends about Gatsby, he didn’t give it much thought but when I forced him to have, at least, a look at it, all he said was ‘wow’. He just loved it.
Probably, you would also have the same thoughts for it but wait until you give it a try. You will not believe its extraordinarily high speed.
Why Gatsby?
“It is a static PWA (Progressive Web Apps) generator. You get the code and data splitting out-of-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.”
Gatsby is a modern and updated version of the traditional Content Management System (CMS) like WordPress. It is way more secure than WordPress which has a long way to catch up with it. Also, the build process is much faster than other CMS platforms.
If you step back, you’d know that you need LAMP setup before going to access or start working on WordPress while these whole setups are covered in Gatsby by-default.
On the point of security, other traditional CMS applications expose the APIs and services to the public which increases the risks. But Gatsby serves static files by CDN which isolates all the API microservices and 3rd party API’s, reducing the risk of attacks.
- Automated code-splitting, lazy-loading, image optimization, prefetching resources, etc.
- Rich ecosystem with over 2000 plugins
- Gatsby Cloud for Faster Build
- Incremental build approach
- SEO-friendly apps/sites
- High security
- Faster performance
It is 2.5 times faster than other traditional static frameworks and extremely safe due to static rendering.
How Gatsby Works?
Gatsby uses a completely different approach than what we’ve seen in Single-page Applications. In contrast to SPAs where APIs requests are made at runtime, Gatsby works a step ahead.
Gatsby gets all the data fetching and sourcing is done at the build-time only. This data, then, creates static HTML, CSS, and JavaScript files through static rendering, leading to faster site response. This is what makes everything more secure and fast in Gatsby.
With the serverless approach and no reachable database, the risk of DDOS and malicious attacks reduces drastically as the attack-surface doesn’t exist.
Gatsby Cloud
The custom-built cloud infrastructure of Gatsby Cloud increases the performance of your sites up to 1000 times with the features like incremental build and intelligent caching.
The main purpose of the Gatsby Cloud is to minimize the efforts that we have to make at the time of the project setup.
Its four main features are the key to its superpowers-
- Cloud QuickStart: It helps beginners and non-technical users to use it in their projects quite easily.
- CMS Integrations: It has the plugins for about 389 CMS and APIs, thus, provides CMS compatibility.
- Real-time Preview: Gatsby provides you a real-time preview of your live code. You can see the changes made on the site immediately.
- CI/CD Solutions: It uses the new ‘Builds and Reports’ CI/CD solutions that will dramatically increase the build speed and report the common errors with feedback, resulting in the better site performance.
Gatsby Ecosystem
Gatsby has a thriving ecosystem with a diverse plugin system, themes, starters and not to mention, Recipes. It has all the tools for building modern and feature-rich websites -
- Plugins for seamless integration
- Themes for effortless configuration
- Recipes for automation of build tasks
Let’s discuss them in detail -
Gatsby Plugins:
The Plugin system of Gatsby aims to make Gatsby flexible and extend its functionalities.
They can be installed directly via the npm registry and are used to implement Gatsby APIs.
The Gatsby ecosystem has many types of plugins that are used for various purposes including responsive images, SEO, data sourcing, support for TypeScript and SASS, Google Analytics, and so on.
In short, they can be used to -
- Add external data
- Transform it into JSON format (from other formats) using gatsby-transformer-json
- Add themes and 3rd party APIs.
- Add support for TypeScript and Material UI to your site using gatsby-plugin-typescript and gatsby-plugin-material-ui respectively.
And so much more.
The list is too long to write here and yet more plugins will be added with new functionalities in the time to come.
You can install a plugin simply via npm-install like any other node.js packages.
Gatsby Themes:
“Gatsby Themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites.”
The Gatsby Theme abstracts out the default site configuration into a single installable package. You can update them, compose another one, or swap them for a more compatible theme anytime you want.
Gatsby Recipes:
Recipes were added recently in Gatsby. They act as a tool to automate some common build tasks such as creating layouts/pages and installing and setting up plugins.
The purpose behind inventing Recipes was to make the site-building process easier for developers by assigning a simple recipe for some specific tasks. Now, they don’t have to tolerate the pain to go through the whole tutorial just for some simple tasks.
Not only Gatsby contain some built-in Recipes but also presents the prospect of creating your own custom Recipes.
To get started with Recipes, first, you need to install the latest version of Gatsby, as given below -
npm install -g gatsby-cli@lates
or
npm install gatsby@latest
Then, select a recipe as shown below -
This is it. If you want more details, you can check out its fantastic documentation and tutorials. Whether you want to build your first Gatsby app or website, here is everything you need -
Last Words:
Gatsby is a wonderful choice for technical and non-tech users alike. You should try it out!
Considering its scope, it has a very bright future ahead. The Gatsby team seems to be working on it continuously and tirelessly. If you check out its official page, you’ll see that even now they’re making further additions to it.
Thanks for reading!! (I’m looking forward to your claps👏😋)