8、Gatsby 网站功能添加指南

Gatsby 网站功能添加指南

1. 引言

在掌握了 Gatsby 的基础知识和核心元素，如 Gatsby CLI、启动器、页面、组件、CSS 和插件之后，我们可以开始关注如何为网站引入和实现一些常见的关键功能。本文将详细介绍 Gatsby 网站的页面和路由机制，以及如何添加表单和处理表单提交。

2. Gatsby 页面和路由

2.1 静态页面与动态应用的融合

Gatsby 作为静态网站生成器（SSG），同时依赖 React 构建交互式用户界面，使得其网站能够模糊静态网站和动态应用之间的界限。当静态渲染的网站内容传输到浏览器后，Gatsby 将控制权交给 React，由 React 执行进一步的动态或异步操作，为静态网站增添更多交互行为。

2.2 重新水化（Rehydration）

重新水化是 Gatsby 网站的一个重要过程，具体步骤如下：
1. 服务器端构建静态 HTML ：通过执行 gatsby build 命令，启动 Node.js 服务器，使用 ReactDOM API 构建和渲染静态 HTML，并将内容和页面的检索操作在构建时完成，最终将 HTML 渲染为静态文件存储在 /public 文件夹中。
2. 调用 ReactDOM 的 hydrate 方法 ：Gatsby 调用 ReactDOM 的 hydrate 方法，从静态 HTML 结束的地方继续进行渲染。 ReactDOM.hydrate() <