What Is Gatsby JS?
Welcome! In this article we are going to learn about Gatsby JS, what it is and why you would use it.
So let’s start with the question,
“What is Gatsby?”
Put most simply, Gatsby is a static site generator. Now what does that mean?
What is a Static Site Generator?
The static site part of this means that what Gatsby will produce for us are static HTML files that we load up on to a server.
Now this works differently than how a lot of websites work where you visit a website and it has to go query a database or do some programming on the server itself in order to serve your web pages.
So Gatsby is going to break that convention and have all of the stuff
already pre-configured ahead of time and
just serve that up.
So that’s the static side of things.
Gatsby is also a generator. This means that Gatsby is actually a tool we run on our computer most commonly, although you can run Gatsby on a server, and it is going to generate content for you.
In the common setup that we’ll practice here we run Gatsby
locally on our computer when we’re building a site and then we generate out the final finished product that Gatsby will spit out, which is a
Gatsby static site, and again this will
In order to do all of this generation Gatsby is going to use Node JS. Node will be running in a development environment on your computer itself. However the final sight when you ship a Gatsby sight live because it’s static it will not need Node JS on the server itself.
It’s using node to help generate the files as part of its tooling system but the final result does not require node to run on the server side.
Gatsby JS Uses GraphQL
One of the great things about Gatsby is that it’s going to use the
language to get data from anywhere.
If you’re not familiar with
GraphQL, it is an evolution of how to make
API calls simpler and more efficient. And it’s a really great tool that you’re probably going to enjoy getting into if you don’t already know it.
The most exciting part of this is that we can get our data into a Gatsby site from anywhere!
We could use
markdown files, we can access databases, we could hook into common CMS’s like
other headless CMS, as well as even just a
Because we have node running in our development environment and we have this GraphQL language, we have a huge range of abilities of what we could do to pull data into Gatsby itself.
This is important to remember that Gatsby is not going to handle our data for us rather it will get that data pulled into Gatsby and generate the site from that data.
Gatsby Uses React for Templates
Gatsby also uses
React and CSS which hopefully you’re familiar with. React is going to be used for all of the templates and CSS for the styling.
So, GraphQL will pull in our data, React will take care of what the template should look like and the styling is CSS. Then finally everything will be exported out into that final, super fast static Gatsby site.
Gatsby Has a Rich Plugin Ecosystem
I also want to mention that Gatsby is built with a
plugin architecture and this is a great system.
This plugin architecture is a huge part of Gatsby and what makes it so popular and powerful.
“What is Gatsby?” Review
So just to briefly review, Gatsby is a static site generator that uses GraphQL to get data, React for templating and it’s got a plugin architecture.
So that is “What is Gatsby?”
Why Use Gatsby?
Now let’s talk about “Why Use Gatsby?”
In one simple sentence, you use Gatsby for its speed security and improved developer experience.
Arguably one of the biggest gains that you get with Gatsby, because it is generating a static site, is going to be the speed.
It is going to be way faster than many of the alternatives, even compared to cached sites using WordPress and things like that because that static site is really hard to beat in terms of its speed and performance.
Also because of the static nature and just shipping HTML files this is going to be inherently more secure.
isn’t a live database to
access. There is not user data that is going to be stored on the server with the Gatsby site. So even
if somebody were to be able to
hack the server itself they’re still
only going to get access to
HTML files and will be able to do far less damage than they could if they were getting access to for example a WordPress site or had access to the user data or purchasers credit card information and all that kind of stuff.
So we’re gonna have huge
security gains when we work with Gatsby.
Finally, the third major gain with Gatsby is improved developer experience.
I’m really glad that this is something important in the
developer community today. It can be really draining and annoying for developers to work with antiquated stacks.
One of the nice things about working with Gatsby is that you have a
modern development environment. The tooling is simple and robust. The languages are modern and clean. Overall it’s a really great environment to be working in. That extends also into the community of other developers.
If you are a developer this should be super clear to you and exciting. If you’re not a developer and learning about Gatsby at a high level, remember that this is something you really need to value in your projects: the developers overall experience.
Gatsby JS is Open Source with a Paid Team
The last thing to remember about all of this is that Gatsby has a solid team open-source community and great documentation.
Gatsby is an open-source project which has some great wins in terms of its ability to grow and people contribute to it. Also it’s free! That’s no small thing.
However, unlike some open-source communities, Gatsby also has a team of professional, paid people that are there to help the open-source project grow and flourish.
This is a great thing if you’re considering investing in a technology that might not have the long term support you probably don’t have to worry about that with Gatsby.
Gatsby Values Documentation
Additionally, there is great documentation and that is really helpful when working with a tool to know that you’ll be supported in the documentation. The Gatsby team seems to take that seriously and do a great job with it.
A Quick Review of Gatsby JS
So, all that said let’s just do a quick review here of everything that we’ve learned:
- Gatsby is a static site generator
- Under the hood it uses Node, GraphQL and React
- Its primary benefits are speed security and developer experience
- Gatsby has a stable and growing community of developers and plug-in authors