Static site generators feature pre-built content pages instead of requested from and generated by a server.
Prior arts and similar projects include Jekyll, Hugo, or Next. They may or may not involve an opinionated front end framework as UI renderer. Like Gatsby is one with React, Gridstone with Vuejs.
Some are opinionated regarding use case. For example, Docusaurus is one targeting specifically to documentations. And it provides versioned docs, multi language support, etc., and is very popular among open source projects such as Redux.
Gatsby is based on React. This means that the actual client-side website is a React application.
Meanwhile, the layouts, templates, and reusable UI parts are all React components.
Gatsby uses GraphQL to manage all the data and asset queries. GraphQL offers some unique features that Gatsby makes uses of to provide predictable APIs for our React app.
Gatsby features
Fast in every way that matters
Gatsby automatically optimizes your site. It follows the PRPL Pattern. Proposed by Google, this stands for:
Push critical resources for the initial URL route using <link preload> and http/2.
Render initial route.
Pre-cache remaining routes.
Lazy-load and create remaining routes on demand.
To see this in action, go to our Gatsby site with developers’ tool turned on, and switched to the Network tab:
(screenshot or video)
Entering the home page, observe that the component and the data file in JSON for home page is loaded.
Hovering on a link, observe that the component and the data file in JSON the hovered page is pre-cached.
There are more optimizations that Gatsby achieve throughout the implementation of our website. We will see alongside the content soon 🙂
Flexible with the content mesh
Traditional static site generators generate pages from static files. Gatsby’s architecture allows us to programmatically create pages based on a combination of data sources through GraphQL interface at once.
Read this article about GatsbyGram to learn more about programmatically create pages from data from Instagram API!
Simple
Gatsby embraces simplicity. Simplicity brings more joy to build.
What is Gatsby
Gatsby features