周记（2021-03-05）：大扫除

[wangpin34]

梳理 Gatsbyjs

本周花了一些时间重新梳理和 gatsby 相关的知识，删除了无用的代码，包括：

home.js

home.js 的目的是覆盖默认的 html 模板（由 gatsby 提供），以生成需要的 html 内容。这个功能其实和 gatsby-ssr.js 有部分重合，比如都可以设置 head 内容。html.js 的优势或者说特别之处在于可以设置 html 骨架，尤其是 body 内的结构。 官方认为 home.js 应该作为一种 workaround 使用。当 gatsby-ssr.js 无法胜任某些工作时（即设置 body 内的结构），作为补充。大部分场景下，gatsby-ssr.js 提供的 hook 已经足够使用了。下面是英语原文解释。

Customizing html.js is a workaround solution for when the use of the appropriate APIs is not available in gatsby-ssr.js. Consider using onRenderBody or onPreRenderHTML instead of the method above. As a further consideration, customizing html.js is not supported within a Gatsby Theme. Use the API methods mentioned instead.

目前项目中尚未碰触到 gatsby-ssr.js 不能胜任的领域，所以将内容合并的 gatsby-ssr.js，然后删除 home.js。

gatsby-ssr.js VS SEO

gatsby-ssr.js 的作用是修改默认的 html 内容。这个 html 会被用来挂载页面 —— ReactDOM.render 在这个 html 里渲染 Page。因为 gatsby-ssr.js 是全局的控制者，所以不可能在这里为不同的页面生成不同的 SEO信息，也就是一些 meta 标签。

所以 SEO 只能在 Page 的作用域里才能发挥效果：根据 Page 的具体内容，生成对应的 Meta。比如，根据 Markdown 文件的头信息，生成摘要，描述，关键字，等等。通常的做法是抽取一个 SEO 组件，从 PageContext 或者通过 GraphQL 查询文件信息，然后用 React-Helmet 这样的 lib 生成 meta。

gatsby-ssr.js 和 SEO组件 尽管都会修改 html 中 head 的内容，但是定位是不同的，前者关注全局不可变的信息，比如 title，icon，等等，后者关注不同页面有区别的信息，典型的就像不同 Markdown 文件生成的页面，有不同的 title 和摘要。

总结一下， 如果需要定制页面 meta，使用 seo 组件（react-helmet），全局内容由 gatsby-ssr.js 负责。最后用 html.js 订制 html 结构（通常并无必要）。