Dennis Brotzky 原作，New Frontend 翻译，LeanCloud 经授权转载。
Narative 一开始就是 Gatsby 粉，我们用它为自己和客户搭建灵活、高性能的产品。鉴于社区对 Gatsby 的兴趣越来越浓，我们想写些东西，希望有助于大家掌握这个不可思议的强大工具。
这篇文章将解释 Gatsby 的生命周期，包括 Gatsby 的特定文件的用途。
我之前学习 Gatsby 的时候面临的一项挑战是理解 Gatsby 的生命周期。我在学习 React 的时候接触到了组件生命周期的概念，但当我开始学习 Gatsby 后又感茫然。我记得当时看了很多代码样例仓库，每个项目中都看到一些 Gatsby 的特定文件，于是就有了这些疑问：「这些文件是做什么的？默认的初始化工具为什么要生成 gatsby-node.js、gatsby-browser.js、gatsby-ssr.js？我可以删掉这些文件吗？」
Gatsby 的工作机制
想要理解这些文件的用途，首先需要理解 Gatsby 的工作机制。Gatsby 是一个静态站点生成器，从你提供的来源拉取数据，据此生成网站或应用。
开发 Gatsby 项目需要安装 Node，以便运行相应的引导和构建过程。Gatsby 使用 Webpack 构建项目，然后运行开发服务。
第一步
每次运行 gatsby develop 都会有一个引导过程，引导阶段会触发大约 20 个事件，包括校验 gatsby-config.js，构建站点数据图式和页面。例如，Gatsby 会在引导阶段创建页面。如果想要深入了解引导阶段的 20 个事件，Swyx 分享了一个非常棒的 Gist 列举其中细节。
第二步
构建过程很像引导过程，区别在于会运行用于生产环境的优化，以及输出可供部署的静态文件。可以类比 React 应用的生产模式和开发模式。
第三步
最后，部署生成文件之后，Gatsby 的生命周期延续到浏览器。Gatsby 生成的静态站点在初次加载后会转变为 web 应用。
敲黑板，划重点，Gatsby 的生命周期分为三个主要阶段：
- 引导
- 构建
- 浏览器
这三个阶段构成了 Gatsby 的生命周期。
运行 gatsby develop 时能看到部分生命周期
运行 gatsby develop 的截屏
如果你熟悉 React 及其组件的生命周期，那么 Gatsby 的生命周期几乎算是同一概念。像 React 生命周期一样，Gatsby 提供了供开发者使用的钩子。gatsby-node.js、gatsby-browser.js、gatsby-ssr.js 之类的 Gatsby 特定文件就涉及到这些生命周期钩子。
Gatsby 特定文件的用途
gatsby-config.js
所有的站点配置项都放在这里，包括插件、元数据、polyfill。这个文件是你应用的蓝图，展示了 Gatsby 的一大亮点——强大的插件系统。运行 gatsby develop 和 gatsby build 时首先读取和校验的文件就是 gatsby-config.js。
源码插件、图像插件、离线支持、样式选项、站点元数据等配置都在 gatsby-config.js 中。
gatsby-node.js
Gatsby 在开发和构建的过程中会运行 Node 进程，使用 Webpack 打包文件，并运行一个支持热重载的服务。Gatsby 使用 Node 加载插件、检查缓存、引导站点、创建数据图式和页面、处理一些配置和数据管理任务。
引导和构建阶段的事件都包括在 gatsby-node.js 中。也就是说，如果你想要基于某个来源插件的数据动态创建页面，或者修改 Gatsby 的 Webpack 和 Babel 配置，那么就应该编辑 gatsby-node.js。
例如，如果你希望手动移动某些文件，例如 Netlify _redirects 文件，那么你可以修改 gatsby-node.js 文件的 onPostBuild 部分。
就我个人的经验而来，我的大部分时间都花在 gatsby-node.js 上，处理数据或是创建页面。这个文件很快会变成你整个网站的关键所在。
gatsby-node.js 钩子的例子：
- createPages
- onCreateBabelConfig
- onCreateWebpackConfig
- onPostBuild
gatsby-ssr.js
说到服务端渲染，你可能会设想这样一个场景：服务器根据收到的请求动态创建页面并发给客户端。Gatsby 不这么做，但它确实属于服务端渲染——它会在构建时生成所有页面。
gatsby-ssr.js 负责处理生命周期这一阶段的钩子。就我的经验而言，大部分情况下包括在生成的输出中插入 CSS、HTML、Redux 状态信息。例如，如果你想要插入第三方的 JavaScript（比如活动追踪代码或是用于统计请求的像素），那么可以在 gatsby-ssr.js 的 onRenderBody 钩子中加入。
gatsby-ssr.js 钩子的例子：
- onPreRenderHTML
- onRenderBody
- replaceRenderer
gatsby-browser.js
Gatsby 生成的静态站点在初次加载后会转变为动态应用，也就是说你可以基于静态站点搭建 web 应用。gatsby-browser.js 提供了方便的钩子，供你处理应用加载、路由更新、service worker 更新、滚动定位等需求。
在静态站点加载之后的一切都可以通过 gatsby-browser.js 的钩子处理。就我创建的应用而言，gatsby-browser.js 主要用于记录路由历史、滚动定位、发送统计事件。
gatsby-browser.js 钩子的例子：
- onClientEntry
- onRouteUpdate
- onServiceWorkerInstalled
- registerServiceWorker
- shouldUpdateScroll
结语
Gatsby 的核心是 React，提供了类似的 API 模式——生命周期。生命周期让开发者可以通过特定的钩子访问站点处理的关键时刻。例如，添加统计功能可以通过浏览器阶段的 onClientEntry 钩子完成。Gatsby 保留了特定的文件名，作为开发者访问生命周期每个阶段的入口：gatsby-node.js、gatsby-ssr.js、gatsby-browser.js。
如果不利用 Gatsby 的生命周期，除了基本的配置以外无法定制和修改你的项目，那将是非常死板、糟糕的开发体验。
