我正在尝试在服务器端加载我的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> 

有什么想法吗？

请您参考如下方法:

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

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