reactjs - Gatsby React-helmet 不是服务器端渲染

Question

我正在尝试在服务器端加载我的react-helmet标签，以便在构建时将它们注入(inject)到静态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 文件。