I will try to explain what a Static Site Generator (SSG) is. An SSG is a cross between a static site and a Content Management System (CMS) in the sense that the static content is generated from a data source.
The final output would be a static site which can be served through a Content Delivery Network (CDN) or any web server. You will not need to run a backend, database and things like that. You can even just run it on your computer by opening the HTML file on your browser.
This post has good points on explaining what an SSG is.
Article No Longer Available
Its Dynamic Capability
An SSG is not totally static. It achieves dynamic content through the process of gathering data from a source and transforming that data into human consumable content through templates.
The keyword here is generator. The generator is responsible for this process and this happens only once every time we need to update our content. Most SSGs use files as a data source. The most common file is a markdown file.
If you don't know what is markdown go and check this post:
Being able to edit content through a file is not truly dynamic. What if we can pull our data from a dynamic source like an API, database or CMS? It is indeed possible, enter Gatsby!
Gatsby
I would like to introduce you to Gatsby. Before I start, just wanted to let you know there are tons of SSGs available. Check out this list by the Netlify team, it contains around ~248 static site generators.
What makes Gatsby different?
Gatsby introduced the concept of "bring your own data". Most of the SSGs can only take content from files. That is where Gatsby shines and it shines with class. I'll quote from their website:
Gatsbyβs rich data plugin ecosystem lets you build sites with the data you want β from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system, and more directly into your pages using GraphQL.
What is GraphQL and how does it fit in the picture?
I will probably save an introduction to GraphQL on a different post. But here is a good post which explains what is it:
Hold your horses, we don't need to setup any GraphQL server to use GraphQL in Gatsby. We don't even need to transform our existing APIs to GraphQL. So why are we even talking about GraphQL?
The diagram below from the Gatsby site shows how GraphQL is being used. Gatsby exposes your data source whichever it may be through GraphQL. This means you don't have to deal with different things if you have a lot of different data sources.
If you are integrating a data source, there is a high chance that a plugin is already written for that. Make sure you check the Gatsby plugins page and look for gatsby-source.
If you do not see a plugin for your use case, it's really easy to start writing your own Gatsby source plugin. A detailed guide can be found here.
Dynamic Templates
A template engine will pre-process data with a template to produce a result document or any kind of formatted output. Once the output is produced, it stops there.
Gatsby is built with React so the way you display stuff is through JSX. It will also produce an output similar to a regular SSG. When you load the produced output on a browser, ReactJS kicks in which will enable you to provide better user experiences by making your site interactive, fast and less janky.
If you have been using ReactJS, it will mostly be the same experience just like how you use it with or without Gatsby. You don't have to switch context to an obscure build system or even a language you haven't used before.
Why is Gatsby so fast?
We already got rid a lot of overhead by using an SSG. Gatsby took this a couple of notches higher.
Performance in Gatsby is not optional, it's built-in. I designed Gatsby with the goal that when using it, it'd be really really hard to build a slow site
You can read a detailed talk about this by (founder of Gatsby) Kyle Matthews here. Try it for yourself to see the difference, watch this webinar by the Gatsby team.
Top comments (0)