Bundling Gatsby

Once the page writing process is complete and the Gatsby bootstrap has concluded, we have a full Gatsby site ready for bundling. In this stage, Gatsby renders all finished pages into HTML through server-side rendering. Moreover, it needs to build a browser-ready JavaScript runtime that will allow for dynamic page interactions after the static HTML has loaded on the client. In this section, we’ll take a look at the final steps Gatsby undertakes to ready our site for the browser.

Gatsby utilizes the Webpack bundler to generate the final browser-ready bundle for our Gatsby site. All the files required by Webpack are located in the Gatsby site’s .cache directory, which starts out empty upon initializing a new project and is filled up by Gatsby over the course of the build.

Upon the kickoff of a build, Gatsby copies all the files located in gatsby/cache-dir into the .cache directory, including essential files like static-entry.js and production-app.js, which we cover in the next section. All the files needed to run in the browser or to generate the HTML result are included as part of cache-dir. Gatsby also places all the pages that were written out in the previous stage in the .cache directory, as Webpack remains entirely unaware of Redux.

NOTE

For more information about how Gatsby generates the initial HTML page for a Gatsby site before initializing the client-side bundle, consult the documentation’s guide to page HTML generation.