Gatsby Build 不会为非页面组件生成 html答案

【问题标题】：Gatsby Build doesn't generate html for non-page componentsGatsby Build 不会为非页面组件生成 html
【发布时间】：2020-05-04 03:05:07
【问题描述】：

我在 gatsby 的 index.js 中有一个页面，结构如下：

export default () => {
  return (
    <Layout>
      <h1>Hello World</h1>
    </Layout>
  );
};

当我运行gatsby build 时，它会公开生成一个 index.html。提供公用文件夹时，一切正常。

我的问题是生成的 html 没有属于Layout 的内容。它会生成类似于以下内容：

<html>
<head>
.
.
.
</head>
<body>
<div id="___gatsby"><h1>Hello World</h1></div>
// Some scripts
</body>
</html>

其余内容基本上由客户端（在本例中为浏览器）生成。页面内容已经渲染，非页面组件在客户端渲染。

所以，即使我运行“Fetch as Google”，我也能获得高于 HTML 的信息。谷歌不会索引上面的内容，并且会错过布局中的其他内容。

生成静态页面有什么意义？或者有没有不同的生成方式？

【问题讨论】：

【解决方案1】：

问题是当你使用像https://material-ui.com/components/hidden/这样的基于响应的类时

Gatsby 不会将它们作为 html 的一部分包含在内，因为这是不可能的。

【讨论】：