添加应用和网站功能
Gatsby 使开发者和创作者能够构建各种不同类型的网站。您可能希望为您的网站添加附加功能，例如搜索、身份验证、表单、评论等等。
应用和网站之间的界限已经模糊，正如 Dustin Schau 在这篇 博客文章 中所说。
我认为这两个概念之间的界限极其模糊。不存在某个神奇的百分比阈值，一旦跨越，就表明一个静态网站已成为应用程序。反之亦然，一个“应用程序”也不会因为其部分内容从未更改或很少更改就变得像静态内容一样。—Dustin Schau
Gatsby 允许您在页面中编排数据获取、转换和使用，但它也允许您决定如何、何时以及在哪里进行这些操作。它允许您构建一个功能极简或功能丰富的网站，您不必仅限于静态网站。
如何实现“水合”让应用成为可能
尽管 Gatsby 生成静态文件，但 Gatsby 应用会通过 ReactDOM API 渲染的静态 HTML 进行“水合”，从而成为一个在客户端运行 JavaScript 的应用。如 React 水合指南中所述，通用方法如下：
- 构建和渲染静态 HTML，在构建时注入数据来创建内容和页面
- 调用 `ReactDOMClient.hydrateRoot()` 方法，接管静态 HTML 的渲染
- 将渲染转移给 React reconciler
正是这最后一个阶段，连接了静态网站和功能齐全的应用之间的桥梁。在这个阶段，您可以调用 动态数据，对用户进行身份验证，并执行您想要的任何类似应用的功能，因为页面正在运行一个 React 应用。
Gatsby 应用的常见模式
组织页面创建方式及其功能的实现方式有不同的选项。这些模式可以结合使用并针对特定用例进行调整，例如在 构建时拉取数据以获得卓越性能，或在 运行时拉取数据以获得更动态的体验。
因为所有 Gatsby 页面都会被“水合”成 React 组件，所以 以上任何一种模式都可以实现类似应用的行为。本节旨在帮助解释一些关于思考 Gatsby 的更高级模式。
静态页面
运行 `gatsby build` 时，通过导出 `src/pages` 文件夹中的组件，或者使用 createPage API 创建的页面，会生成静态文件，如下图所示。
该图说明了创建网站页面时的两种主要方法。
- 通过 `src/pages` 自动创建
- 使用 `createPage` API 编程创建
注意：插件和主题也可以实现 `createPage` API，并代表您创建页面。
当您从 `src/pages` 目录中的文件（在此示例中，`/home` 路径对应 `src/pages/home.js`）导出一个 React 组件时，Gatsby 会自动创建一个静态页面。通过遍历文件系统中的 Markdown 文件，您可以以编程方式为所有博客文章创建页面。文档中有更多关于 创建和修改页面的信息。
这些创建的页面在 React “水合”后 可以 运行 JavaScript，但它们并非必须如此。
混合应用页面
您创建的页面可以调用外部服务和 API，以实现更具交互性和动态的行为。这些页面有时被称为混合应用页面，因为它们结合了 Gatsby 创建的静态特性（有助于快速加载您的网站并提高性能）以及传统的 Web 应用特性。
下图展示了一个与上一个示例类似的网站，但在主页上添加了一个订阅表单，该表单向某个数据库发送客户端 `POST` 请求，并且博客文章可以从数据库或其他 API 端点 `GET` 推荐内容。
遵循这种模式意味着您依赖 后端来保持邮件订阅和博客推荐等功能的正常运行。但是，由于创建的静态资源不是按需由服务器生成的，因此您网站上的内容（如您的博客文章或主页）永远不会宕机或变得不可用。
仅客户端路由
Gatsby 也支持使用基于 React 的客户端路由。这种模式通常被称为“仅客户端路由”，即那些不在静态渲染文件中体现的路由。Gatsby 内置了 `@reach/router`，因此这是一个很好的选择，可以避免您的网站需要加载其他路由库的额外 JavaScript。
使用 Gatsby，您可以像在传统 React 应用中一样导入路由器并设置导航路由。唯一的区别是 Gatsby 不会将这些路由构建到 `/public` 文件夹中的独立页面。因此，为了让用户直接访问该 URL，您可以使用插件来创建这些页面。这在 仅客户端路由指南中有介绍。
下图展示了如何在页面上挂载 `
在此图中，一个客户端渲染的用户页面可以显示登录用户的特定信息，并且 `/app/tasks/:id` 的动态客户端路由可以显示特定 ID 任务的详细信息。
Gatsby 与其他 React 应用的区别
理解 Gatsby 应用与使用 Create React App 等工具创建的应用之间的区别，需要克服一些范式的转变。
使用 Create React App 构建的网站实际上可以 迁移到 Gatsby。
全局 `App.js` 组件
在“Gatsby 应用的常见模式”部分的图表中解释了一个主要区别，即 Gatsby 提供的混合和静态页面的组合，与一个全局 `App.js` 组件。Create React App 的应用将主要在渲染在根部的一个 `App.js` 组件上设置纯客户端路由，该组件不会被卸载。在 React 应用中，`App.js` 组件通常是包裹整个应用的 Theme Providers 和 Context 的地方，以便向所有组件提供某些数据或在路由更改之间保留数据。Gatsby 有一个根元素，可以对其进行包装以在页面导航之间保留状态或数据，但它是通过 `wrapRootElement API 访问的，而不是位于 `src` 文件夹中的文件中。通过 `wrapPageElement API，可以在页面周围包装持久化的 UI 元素。
页面和路由创建
在 React 应用中，创建页面需要设置一个路由器。Gatsby 则为您处理了部分路由功能；您可以通过在 pages 目录中放置一个导出的组件来创建页面。Gatsby 会根据组件的文件名生成一个具有固定 URL 的页面。您仍然可以导入一个路由器并自己设置路由。
要将 Gatsby 与 Next.js 和 Jekyll 等其他 Jamstack 工具进行比较，请查看 功能比较页面。
生成具有静态渲染资产的高性能网站是 Gatsby 的核心重点，但这只是硬币的一面。在本节文档中，您将找到一系列指南和概念，介绍如何通过在静态基础之上添加所有类似应用的功能来升级您的网站。
本节内容
- 页面间链接
- 添加搜索
- 添加分析
- 添加身份验证
- 添加表单
- 添加 React 组件
- 构建联系表单
- 添加 404 页面
- 添加 SEO 组件
- 为博客文章添加标签和分类
- 添加分页
- 添加评论
- 创建站点地图
- 添加 RSS Feed
- 添加页面过渡
- 使您的网站可访问
- 路由
- 构建时和客户端数据获取
- 使用仅客户端的包
- 构建电子商务网站
- 添加 Redux Store