Understanding React Hydration
The steps taken to deliver a built site to the browser are discussed below:
gatsby build starts up a Node.js server that processes your site: it creates a GraphQL schema, fetches data that your pages will pull in by extracting queries from your code and executing them, and it then renders each page’s HTML.
The “Overview of the Gatsby Build Process” conceptual guide helps explain what’s happening at each step in the build process.
All of this data is gathered during the build and written into the
/public folder. You can customize Gatsby’s configurations for Babel and webpack, as well as the HTML generated by your build, in order to tweak how your site gets built.
hydrate() method is called internally by Gatsby from
ReactDOM, which according to the React docs is:
Note: if you need to, the hydrate method can be replaced with a custom function by using the
replaceHydrationFunction Browser API.
This means that the browser can “pick up” where the server left off with the contents created by Gatsby in the
/public folder and render the site in the browser just like any other React app would. Since the data and structure of the pages is already written out, it’s not necessary for Gatsby to go to another server asking for HTML or other data.
- Rendering on the Web from Google