javascript - 在 Gatsby 中使用 useStaticQuery 填充数据的 SEO 效果

Question

Afaik，预先渲染的 HTML 内容，其中文本内容已经填充在 DOM 中，具有更好的 SEO 性能，因为谷歌机器人不需要混淆 javascript 来读取页面内的数据。
正如我在 Gatsby 的文档中看到的，可以通过 useStaticQuery 填充数据。其中数据加载了 XHR 请求并注入(inject)了 javascript 到需要另一个渲染的页面。我想知道它在 SEO 性能方面的效率如何。
正如我所见，他们直接建议通过这些查询提供 SEO 敏感数据:

const SEO = ({ title, description, image, article }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)
  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }
  return null
}
export default SEO

此外，如果这种查询方法对 SEO 性能有负面影响，Gatsby 中是否有任何内置方式来预渲染这些内容？

Answer 1

Gatsby 在编译或部署站点时(即:当您运行 componentDidMount 命令时)创建 SEO 对象(此外，JavaScript 中的任何默认对象，除了受 useEffect/build 钩子(Hook)或类似 React 生命周期影响的对象) .这意味着您的 SEO 对象将从任何 CMS 数据源动态生成，您的对象将在编译时用来自任何源的任何数据填充，但一旦完成，它将输出为纯 HTML 文件(在 /public 下)。文件夹)。这个纯 HTML 是 Google 会读取的内容，它不会处理任何 JavaScript，它会直接读取您的元数据。
这就是 Gatsby 的工作原理以及它对 SEO 友好的原因:如果您的代码高效，洞察力得分结果总是惊人的，但 Gatsby 通过输出纯 JavaScript 而不是将其发送到服务器(如 WordPress 或其他 PHP 站点)来帮助达到惊人的分数确实)，您的文件就在那里，随时可供 Google 读取，这就是为什么速度如此之快。
问你的问题，Gatsby 在编译时内置了 SEO 对象，而不是异步或在你打开 Gatsby 站点时处理任何 JavaScript。