Gatsby is react-based open source framework and fast static websites generator. It allows to create static HTML at build time and gives the browser a complete page.
The choice of the framework depends on the project itself.
- Gatsby: Static HTML and can be used when you need good SEO and you don't have frequent data updates
- NextJs: Server Side rendering if you need good SEO and data is updating frequently exp: facebook
- CRA: Client side rendering when you don't need good SEO exp: private dashboards
- Install Global CLI:
npm install -g gatsby-cli
- Create new Site:
gatsby new my-gatsby-app
- Start development server:
Once you create you Gatsby application you will find this structure of the project:
|-- /.cache |-- /plugins |-- /public |-- /src |-- /pages |-- /templates |-- html.js |-- /static |-- gatsby-config.js |-- gatsby-node.js |-- gatsby-ssr.js |-- gatsby-browser.js
src folder: This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.
- pages: become pages automatically with paths based on their file name
- templates: Contains templates for programmatically creating pages.
- html: need to be modified if you want to insert custom HTML into the or of each page on your site
- static: it will not be processed by webpack.
- gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc.
- gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
- gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.
- gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
Gatsby’s data layer is powered by GraphQL and it allows you pull data into your components