Gatsby is a React-based framework that can be used to create static and dynamic websites. Most React developers would think why would we need Gatsby if we can build websites using React?
React is not a Framework, but it is a Javascript library used to build reusable components. To build the website, We need to take care of many things e.g. Page routing, code automation, Image optimization, SEO, etc. For that, we need to install an extra package to build the code infrastructure for the website.
Instead of building the infrastructure from scratch, we can use a framework (built on React) to build the website.
There're many React frameworks available but the most popular are Nextjs, Gatsbyjs, and Create React App. Below I've outlined 9 reasons to use Gatsby Framework for React developers.
| Sr# | Reasons | Description |
|---|---|---|
| 1. | Gatsby Functions | We can define an API function in the Gatsby that responds to the incoming HTTP request. Gatsby function is like a server function that is executed when we send the HTTP request. |
| 2. | Gatsby Plugin | Gatsby provides thousands of plugins that we can use in the project to add functionality to the website. Moreover, Gatsby provides a source plugin that we can use to source data at build time from different resources e.g. WordPress, CSV, SANITY, excel, APIs, etc. |
| 3. | Filesystem Routes | In Gatsby, we can create a Page component to define the route of the website. We can define static or dynamic routes based on the need. Dynamic route renders the page based on the slug in the URL. |
| 4. | Partial Hydration | React Server Component is possible with Partial Hydration. With Partial Hydration, Gatsby sends only necessary Javascript to the client browser. Partial Hydration is like executing React component on the server. |
| 5. | Render Data | Gatsby gives the choice to the user to render the website either at build time (Static Site) or at runtime (Server-Side Rendering). |
| 6. | Head API | You might be familiar with React Helmet NPM Package that is used to manage the meta tags in the document Head. Gatsby provides Head API out of the box that we can use to manage the meta tags in the document Head. |
| 7. | Script Component | Gatsby provides a script component that we can use to load the script component on the website. With the Script Component, we can define loading strategies that provide performance out of the box. |
| 8. | Slice API | In Gatsbyjs, we can use Gatsby Slice API to build only those pieces of component that are changed and else remain constant. |
| 9. | GraphQL Data Layer | Gatsby ships with GraphQL data layer by default. We can use the GraphQL layer to query the build time data. |
If all the above benifits makes sense to you, you might need to try Gatsbyjs. If you're interested to learn, I've wrote a Gatsbyjs Course.
Top comments (0)