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文件。

Gatsby React-Helmet不是服务器端渲染

1 个答案: