What is Gatsby? React Vs Gatsby…

We are in a very critical situation all around the world, except for a few countries. Almost every country is in trouble, they are working hard to control the imperceptible enemy. I hope everyone is safe and writing this blog with the hope of everything will be alright soon …

Let's jump into today's need in web development,

Gatsby is one of the promising framework based on React. It helps develop super-fast web applications and websites. It is a static site generator for react applications. Gatsby has a strong construction on top of React. It will help you to represent the Gatsby page as a static page but interconnect with React components. That will provide us to get dynamic content more faster and reliable.

Gatsby CLI interface is built on top of NPM, It has its own set of command over the node server. Of course, node packages are more value-added to the Gatsby.

$ npm install --global gatsby-cli

What is a Static Site Generator?

I started this blog post as a static site generator, Let me address the quick note to that, I believe that will help you to understand the Gatsby in better form.

When we speak about any of the applications, we consider the performance of the application in terms of loading speed and how fast it is been responding on the fly playing in the site. The performances obviously depend on the load of the page, whether it is static content (which represents the content itself) Or its dynamic content (gets the content from somewhere and populates them on the screen in the form of HTML).

Static content pages are called static pages, it will be faster and easy to showcase to the outside world. The disadvantage of the static pages, will not able to populate any real-time content, every time content has to deployed by editing the file and user input cannot be grabbed. Dynamic content pages are called dynamic pages, this kind of page is more useful and value-added to the website representation. It involves the manipulation of data before presenting it to the audience. These pages are interactive pages, content will be more up-to-dated. The major disadvantage of this kind of pages will be the performance, when we start manipulating the content at the back-end and proxy the data to the user will consider the reasonable time to generate content to the page.

A static site generator is a technique, which will help you to get the dynamic page in the form of site page. It produces the site page on the build process and end result will be static representation of HTML and CSS.

Cool Development on Gatsby

Why should I consider Gatsby for our website? (as a Developer)

1. It is built on top of React, Added advantage with GraphQL
2. Specialized in static page creation.
3. It is a rumble of the JAMStack (Javascript, API’s and Markup) approach to building applications.
4. The development will be on top of “Hot Reloading”. It is provisioned the rapid development of the site.
5. A template engine is made on JSX.
6. CMS auto integration features, painless usage of CMS with front-end framework.
7. Extended support for market standard Headless CMS like Drupal, Kontent, Strapi, Contentstack, and Agility.
8. Extensible support for external hosting including CDN supports.
9. A good community for contribution support.

Why do we should consider gatsby for our websites? (As an Organization)

1. Provides in-built cloud hosting capability
2. It is a faster performance.
3. 3 ways of content adoptions to the presentation layer, it will expose more options to the customer to store their content (Resource allocation will not be more crucial, Gatsby will be help you to overcome that, because we have options to choose multiple CMS on integration)
4. Google loves faster website to crawl for there customers, so there is no doubt it will be best for SEO
5. Low cost on maintenance
6. On commercials aspects, It is working on the Freemium model.
7. Quick Development completion, of course, resources can be utilized for other projects :-)
8. Phenomenal experience on-page navigation (Yes, it is site pages)

You may have few questions around your mind …

As you mentioned it is a static site generator, How it will represent the dynamic content to the page? Or Gatsby is not for the dynamic site?

It is good questions, Yes it is a static site generator. But you can build the dynamic pages too. HTML content will be parsed and presented for a static page, for dynamic content Gatsby will connect through GraphQL for content representation.

Is that my dynamic content will be reflected in the site immediately?

To be honest, It won't display the new content until the new build is been completed. Data will be only fetched during the build step. To keep the content up-to-date to the site, There are couple of ways to update the content instantly, either configuring the CI/CD on content edit / You can configure the CRON job based on your convenience frequence.

Can we host Gatsby's application to any of the hosting environments?

Even though we are discussing different forms of techniques on coding. End of the day it is a javascript delivering site. So the hosting environment is not constrained, we can host at any hosting provider, But preferably Node CLI enabled hosting will be handier for maintenance.

React Vs GatsBy

If your a react user, you can easily adapt yourself to the culture of Gatsby. Yes, as I mentioned in the about key facts about Gatsby. It more favor to the react developer to jump into the development coding style. Nonetheless, it is built on top of React architecture, but few more extras flavor been added to it. Of course, that's the specialty of Gatsby :-)

Majorly it differs on the point of application workflow, which is where is more value-added to the market and kept stable to their standards. Yes, the page rendering process is more prominent to the Gatsby application to the application front.

Another hand, node packages and culture of using the Node CLI are common to React and Gatsby Since the ecosystem is the same. When it comes to folder and file structure, Yes there are changes based on the standards of coding culture.

React Folder Structure

├── .git
├── .gitignore
├── README.md
├── node_modules
├── package.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock

Gatsby Folder Structure

├── .git
├── .gitignore
+ ├── .prettierrc
+ ├── LICENSE
├── README.md
+ ├── gatsby-browser.js
+ ├── gatsby-config.js
+ ├── gatsby-node.js
+ ├── gatsby-ssr.js
├── node_modules
├── package.json
├── src
+ │ ├── components
+ │ ├── images
+ │ └── pages
└── yarn.lock

When you start building the gatsby application, you may need to know about key concepts of gatsby and how handy in development to present more user-friendly applications.

Let’s jump into the coding culture

Now we will be deep dive into the technical aspects of the Gatsby and key connectors to build the application different from classical development.

Styles of Stylesheet usage

Consuming the CSS in the standard model, adding the all CSS class into the file which holds the extension of *.css. As usual, all the classes, Id specific styles, and extensive property of HTML elements attribute. In component-scoped CSS, it will elevate the CSS into the next level of representation. It will be more useful to segregate the CSS style specific to the component. Another important style of the stylesheet is CSS Modules, Wraps the class and animation names are scoped locally by default. Again it is segregation, but it will be ahead of the CSS style. It will enable you to create the component for reusability.

import styles from “./test.module.css”

Specific to the page name, we can create the CSS module. The filename will be pagename.module.css. However, the file name doesn't have the prototype to follow, just for our understanding to be followed nomenclature. The module file will be imported to the actual page using import statements.

I believe everything in a single post, that will be more informative to the audience and will not be more healthy to convey the complete concept of the Gatsby.

I will catch you the Part 2 content in couple of days…

Thanks lot for your attention to this blog post.