Concepts
Gatsby is a phenomenal framework that abstracts cutting edge technologies.
React hydration
Gatsby uses React DOM server-side APIs to generate static HTML contents and those pages eventually get rehydrated into a React application. Some of the same JavaScript code used to generate Gatsby pages is reused in the browser where DOM APIs like window are available.
GraphQL
Gatsby uses this query language to make data available in the browser when needed by your components.
Routing
The mechanism for loading the correct content in a website or app based on a network request - usually a URL. Gatsby creates paths to access content and handles dynamic routing with content prefetching under the hood.
Themes
Themes are a particular type of plugins with their own gatsby-config.js.
Theme shadowing
You can override components, objects, and anything else in any theme’s src directory. You'll find more details here.
v2 to v3
V3 is a major version that comes with breaking changes.
Update Gatsby
yarn add gatsby@latest
Update all other dependencies
yarn upgrade-interactive --latest
The official guide
The Gatsby community is crazy good at writing documentation. You can read the migration guide
Core files
gatsby-config.js
The main configuration file that contains:
gatsby-node.js
Gatsby loads that file after the plugins, the cache, the bootstrap, and the GraphQL scheme. You get access to the CreatePages API to add your custom nodes (~ URLs).
gatsby-ssr.js
That file controls a special step, when Gatsby handles by itself the equivalent of a node server (~ compilation) to transform React code into static HTML assets. You get access to SSR APIs.
gatsby-browser.js
Browser APIs let you respond to Gatsby-specific events within the browser. This is where you can interact with the client side.
Plugins
Gatsby has a strong ecosystem with helpful plugins.
Note that you can have additional lines for the plugin configurationAdding a plugin
Install the node package and open the gatsby-config.js file:
module.exports = {
siteMetadata: {},
plugins: ["gatsby-plugin-image"],
}
There's a plugin for Google Analytics if you need too.Must-have plugins
Best plugins for alternative approaches
Use this list with caution and check the compatibility with the v3 before.
CLI
Create the next big thing with Gatsby
Start with gatsby new the-next-big-thing
Start a new dev server
Run gatsby develop -o, the -o option opens the site in the browser as a new tab.
Delete the cache and the public folder
Run gatsby clean.
Build the site
Run gatsby build.
Serve the build
Run gatsby serve -o, the -o option opens the site in the browser as a new tab.
Test the site locally on a real mobile phone
Run gatsby develop -H 0.0.0.0 -p 8000
Flags
You can add flags in your config to customize your dev experience:
// In your gatsby-config.js
module.exports = {
flags: {
FAST_DEV: true,
},
}
PRESERVE_WEBPACK_CACHE
to keep webpack’s cache when changing gatsby-node.js & gatsby-config.js files because you rarely need to delete it
FAST_DEV
to improve dev server start time
DEV_SSR
to detect SSR bugs and fix them without having to build
QUERY_ON_DEMAND
to only run queries when needed instead of running all queries upfront
LAZY_IMAGES
to skip process images during development until there’s an explicit request for them from the browser
PRESERVE_FILE_DOWNLOAD_CACHE
to keep the downloaded files cache when changing gatsby-node.js & gatsby-config.js files because, again, you rarely need to re-download them
FAST_REFRESH
to use React Fast Refresh instead of the legacy react-hot-loader for instantaneous feedback
PARALLEL_SOURCING
to run all source plugins at the same time instead of serially
FUNCTIONS
Serverless functions for Gatsby cloud
Source from CMS
Gastby can source from various CMS and APIs.
WordPress
Gatsby can connect to WordPress through GraphQL to query contents.
See Gatsby demo v3 - WordPress. Read the installation guide carefully.
Top comments (3)
Loads of useful information here!
May I make a suggestion? Use the
<dl>,<dt>and<dd>elements to create lists like this instead of spoilers.They auto format nicely, are easier to read and are semantically correct!
Example
Gatsby uses React DOM server-side APIs to generate static HTML contents and those pages eventually get rehydrated into a React application.
Some of the same JavaScript code used to generate Gatsby pages is reused in the browser where DOM APIs like window are available.
It looks way better! Other than that, great article as I said! ❤
It isn't bad, just
<dl>is better. Plus it makes the article easier to scan read without having to keep clicking to view terms etc.Enjoying the series! 🤎