Introducing Gatsby, the new & best SSG -Static Site Generator- *as of Today*
Built with webpack, React & GraphQL.
Who am I?
As a web developer, who wants to make a website or web app, you're surrounded by so many choices, resources & communities.
But do you know what all these resources share in common when you're trying to make a website (web app)?
Yup, that's right!
Html, CSS & JavaScript
So, what if you could use JavaScript for everything?
Would you really bother exploring the other options?
Or you're like me and have already chosen to do it with JavaScript only?
Well then, you will have to narrow the choices down a bit and because you want to build a website (web app) & not an API or any server side thing.
And as a React developer, you will end up with these 3 choices
So What's Gatsby?
Gatsby is a new Static Site Generator - Built with React, webpack & GraphQL.
It creates hybrid websites: think of it as a mixture of a static website and a React app.
- It generates HTML pages (files) at build time
- Navigates between pages with pushState just like a SPA
What’s so awesome about it?
- You can build your static website or dynamic app with Gatsby.
- Use different Data sources or file formats to manage content.
- You could also use different services for search/auth/cart/payments etc...
Pros & cons
Pros
- Secured as it’s static
- Cacheable
- Cheap to host
- Out of the box good performance, pwa & best practices.
- Loads blazing fast
- SPA look alike
- Hot reload
Cons
- Does Not generate new files on demand but does it during build time & for only predicted pages.
- Plugins system
How Gatsby renders the content?
Step 1
- It opens & validates gatsby config, then it loads the plugins after deleting the html/css files of the previous build.
Step 2
- Gets the content (if there is any) from your files or platforms such as Contentful/Wordpress etc...
Step 3
- Extracts & runs the static queries, then it generates necessary pages if you did so on gatsby-node file.
Page & Static queries
Gatsby has templates, pages & components
- Page queries do accept variables via pageContext in gatsby-config but can only be added to page components & templates (templates === pages).
- Static queries do not accept variables and can be used on components.
Gatsby plugins
- Add external data or content (e.g. your CMS, static files, a REST API) to your Gatsby GraphQL data.
Source plugins
- Transform data from other formats (e.g. Markdown, YAML, CSV) to JSON objects.
Transformers
- Add different third-party services to your Gatsby site like (GA, Algolia, Auth0…).
Services
Gatsby is used by popular corporations
