Gatsby 5(The Future of Tech)
Tags: gatsby, nextjs, react, webdev
Published: 2023-01-16 08:23:23


www.gatsbyjs.com/gatsby-5/ With Gatsby 5’s new Slice API for supercharged component builds and Partial Hydration to speed up your site performance — updating your website and content at scale has never been easier.

## To install gatsby5

```
npm i gatsby@latest

```

www.gatsbyjs.com Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX (Markdown with JSX), images, and numerous Content Management Systems such as WordPress, Drupal and more.

> [1] Since version 4 Gatsby also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server.

> [2] Gatsby is developed by Gatsby, Inc. which also offers a cloud service, Gatsby Cloud, for hosting Gatsby websites.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xv0fquq5n8rtqg12m6f.jpg)

**What is Gatsby?**
Gatsby is a static site generator that allows users to create an application using the command line in a matter of minutes. Gatsby requires Git and Node.js. You then need to install the Gatsby CLI to utilize the commands available. An excellent tutorial can be found on the Gatsby website here. If you're ever lost you can always use gatsby --help once you have it installed.

Gatsby acts as a way to quickly set up web apps from templates, install or build plugins and utilize or create themes (among many other things). As the best management system I've seen, you can expect Gatsby to provide delivery and payload optimization (meaning that performance will impact users as little as possible because of features like progressive image loading and static content), offer an ecosystem and environment that you can use to develop your app in, and provide governance that can be used to secure your product.

**Why Gatsby**(In a simple Way)
Developers to Build **FAST**,**SECURE**,**POWERFULWEBSITES**

**Let me give some examples**:

**FAST**: It loads single HTML file very fast as well as dynamically update the page by the user.

**SECURE**: CONTENT SECURITY POLICY (csp) 
- This is problematic when creating a Content Security Policy (CSP) for your site, as the inline scripts mean script-src 'unsafe-inline' needs to be configured for your CSP. This in turn undoes some of the benefits of a CSP.

1. Adds the layer of security.
2. Detects the attacks from various resource.

Types: 
- Self cross site scripting(xss) 
https://www.gatsbyjs.com/docs/conceptual/security-in-gatsby/#cross-site-scripting-xss.

- Data injection attacks.

**Webpack in Javascript**: It is a Moudule Blunder for javascript used in Front-end Projects.

**Cross site scripting(xss)-Example**:
Running unverfied code on social Media and online gaming were rewards are given by running it is known as Cross site scripting(xss).

**Gatsby Competitors**:

1. Bazaarvoice
2. Impact.com
3. Mavrck
4. Grin
5. Afulencer and more,

**Gatsby**:

- Speed
- Scale
- Security

**Speed**: Loads the content faster,compiles faster, building websites is faster and easy.

**Scale**: Delivers content to vistors faster than traditional server.

**Security**: Avoids vulnerability than other traditional server.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr21z98wtyl1nyu9jz40.jpg)

**Must Learn in Gatsby5**: 

- Slice Api
- Partial hydration

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od8y244ieiodcr5afpak.jpeg)

**Slice Api**: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1idnewzqa8lzskyczyyt.png)

Gatsby will be able to build and deploy individual pieces of your site that had content changes, not the entire page.

```
<slice>
```
 - React component referred as slice placeholder

**Valhalla content hub**: Its work is to provide centralized data layer,

- For managing content across various sources.

- Speeds up the process of building for large content sites.

CMS - Content Management software is used in this.
**content management software**:

Other CMS's:

1. Wordpress
2. Drupal

**MONOLTHIC CMS**: Responsible for both backend management content, and serving that content to the end users.

Examples: 
A Gatsby website needs to pair with CMS otherwise any content changes will to be made through the code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9fd5kgzs21oyrg3nuvr.jpeg)

**SEO(SEARCH ENGINE OPTIMIZATION) BOOST**: Quality and quantity of the website traffic to a website or webpage from any search engine.

**CDN(CONTENT DELIVERY NETWORK)**: It makes combined data from anywhere.
It has,

- unified datalayer

- Graphql datalayer

- Gatsby datalayer


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fik5nh07bayrs7k5m9km.jpeg)

**Unified datalayer**:
Enables developers to combine data from anny resource and render in your website.

**example**:
You can add content in your website from any resource such as shopify, wordpress and stripe.

**Gastby Cloud**:
Build especially for Building,previewing and deploying Gatsby websites.

**Your site is build and deployed in real-time on global edge network that provies millisecond loadtime for site visitors.**

**Global Edge Network**: Distributes,computes,data storage,request,serves the client with low latency is known as global edge network.

**CONTENT DELIVERY NETWORK(CDN)**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kckak0ebno3jca746vhw.jpg)

A **content delivery network** or content distribution network (CDN) is a geographically distributed network of proxy servers. Crystallize uses a CDN to improve website performance and user experience.

**1. Gatsby creates a dev environment on your machine to test your project within minutes.**

**2. Gatsby's plugin library is massive and is updated often.**

**3. Gatsby has a great community.**

**4. Gatsby has a page that shows how much better it is than its' competitors.**

**My sites and personal profiles**:
Linked In - www.linkedin.com/in/nagaarvind
Github - https://github.com/nagaarvind
Instagram - arvind_2002