- What is Gatsby JS?
In this article, we will be explaining what is Gatsby JS, the new features of Gatsby 5 which was released on November 2022, what are the fundamentals needed in creating a Gatsby site and lastly, the points why you should use Gatsby in your next projects.
What is Gatsby JS?
Let's dive deeper by explaining the following:
- Static Site Generator
- Progressive Web App
- Rendering Options
- Data Layer using GraphQL
With all the benefits of React, using Gatsby makes it more easier to build websites. Some of the benefits of react are the following:
- Declarative - which makes code more predictable and easier to debug.
- Reusable UI components - you can focus on single component and then reuse them to a more complex UI.
- State Management - state contains information of each component that you can use to change the UI easily.
- Fast Rendering - It uses virtual DOM to render only a part of the DOM that needs to be updated instead of re-rendering the whole page.
- Easy to Learn and Adopt - less code but more functionality and using react hooks, it makes it easier to learn and adopt.
- Code Stability - it uses downward data binding from parent component to child component.
- Very Popular and Industry Standard
- Many community support online
Gatsby is a Static Site Generator
Gatsby is a Progressive Web App
Open Progressive Web AppsProgressive Web Apps is also an advantage cause you don’t need to create a native app for android and iOS. PWA can run on both computer and mobile devices that has a support browser running on it. For mobile devices, just click Add to Home Screen and it will become like a native app.
Gatsby Rendering Options
Static Site Generation (SSG)
From the figure above, you have the different data sources, it can be markdown files, Open WordpressWordpress, Open ShopifyShopify, Open ContentfulContentful or even from a Public/Private API, using Open GraphQLGraphQL it will combine them into one website. Gatsby is using pre-rendering which will generate all the static files.
There are two options on how you can deploy your site, first option, if you are not using Open GithubGithub, you can easily copy the files using FTP or SCP to any VPS hosting. In Open cPanelcPanel you can compressed the file into zip file and upload it manually under File Manager.
Second option if you want to use auto build and deploy, use Open GithubGithub and integrate it to Open NetlifyNetlify, Open Digital OceanDigital Ocean and others. The good think using this option is you just need to update and push your code to Github and once it's done, these hosting will auto build and deploy your site.
Deferred Static Generation (DSG)
Deferred Static Generation is similar to Static Site Generation, however, it builds only when a user accessed the page for the first time. This will improve build time for Static Site Generation. Deferred Static Generation is best used for pages with less traffic or old articles. Just take note that this should be run in server with NodeJS running by using gatsby serve command.
Server-Side Rendering (SSR)
Using Server-Side Rendering, the server generates the full html on the fly when a user visit the page. That's why visitors will always get the latest version of content directly from the server. This is however, slower than SSG and DSG. Same like Deferred Static Generation, it requires running NodeJS server using gatsby serve.
Combine Different Data Sources using GraphQL
Gatsby has a powerful feature called data layer which uses technology GraphQL which is also developed by Facebook/Meta. This data layer is used to pull data from different data sources and combines them into one format. These sources can be Markdown files, CMS like Wordpress, e-commerce from Shopify, from Public/Private Api and some databases.
What's new in Gatsby 5?
Gatsby 5 was released last November 2022 and below are some of the exciting new features:
- Partial Hydration
- Slice API
- GraphQL v2
- Script API
- Slice API
Partial Hydration simply solve time of interactivity which means gatsby 5 makes your site even more faster. Using this method, you don't need to wait for your site to have full hydration.
From the image above, on the right side, partial hydration makes the Carousel Interactive immediately when the user visit the page. When the user click it, it will get an interactivity and will not be confused if the buttons are disabled or something went wrong.
Slice API makes building faster. In the image below, the green one which is the content will only be added in the build time. It makes sense because header, sidebar, footer which is heavily shared component, have no changes at all so why don’t we add them in build time right?
An example to this, if you have a Wordpress site and you have a blog, once you updated your blog, your site will create builds only for the blog content part and not the other part of the website.
In GraphQL v2, they added dark mode which is easier to code at night, tabs to work multiple query, persisted state/Tabs using localStorage, better documentation explorer through search and markdown support and lastly plugin ecosystem.
If you're working with the free plugin react-helmet before, now you can use this new Head API. Compared to react-helmet or other similar solutions, Gatsby Head is easier to use, more performant, has a smaller bundle size, and supports the latest React features.
Gatsby includes a built-in Script component that aids in loading scripts performantly. It supports both scripts with sources and inline scripts.
Fundamentals needed in creating Gatsby site
Below are the fundamentals needed in creating a Gatsby site which we will be creating in the next tutorials.
- CSS, SCSS/SASS
- Command line
Why you should use Gatsby?
Here are the list why you may choose Gatsby on your next projects.
- Builds Fast and Powerful Websites
- Easy to Learn, Developer and User Friendly
- Progressive Web App
- SEO Friendly
- Combine different data sources in to single site
- Easy Deployment
- Free themes and plugins
- Many online community support
Now you have understand what is Gatsby and the new features of Gatsby 5. With the benefits of using React, Gatsby makes it easier to create a secure and powerful website. Using GraphQL, you are able to combine data from different sources into one single site.
You can also watch the video version of this article below: