Gatsby react-helmet 不是服务器端渲染

Question

我正在尝试在服务器端加载我的 react-helmet 标记，以便在构建时将这些标记注入静态 html 文件。这将允许 Facebook 等直接获取源文件并使用适当的元标记。

用这个配置我的应用程序后，我在服务器端静态渲染输出中看到的只是：

<title data-react-helmet="true"></title>

设置：

gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-react-helmet']
}

app.tsx

import Helmet from 'react-helmet';

const Head: React.FunctionComponent<Props> = () => (
  <Helmet title="the title is big" >
    <meta name="description" content="the content" />
  </Helmet >
);

...

gatsby-ssr.js

const {Helmet} = require('react-helmet');

exports.onRenderBody = () => {
  console.log(Helmet.renderStatic())
}

**Output**
<title data-react-helmet="true"></title>

有什么想法吗？

Answer 1

您不需要拥有自己的gatsby-ssr.js 文件。通过使用gatsby-plugin-react-helmet，您就可以开始了。您的 Head 组件应该可以正常工作。

您如何看待输出？在浏览器中使用“查看源代码”？您需要查看 /public 文件夹中的 .html 文件。