Gatsby react-helmet not server-side rendering

Question

I'm trying to load my react-helmet tags server-side so that these are injected into the static html file at build time. This would allow things like Facebook to take the source file directly and use the appropriate meta-tags.

After configuring my application with this, all I see in the server side static render output is:

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

Setup:

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>

Any ideas?

Answer 1

You don't need to have your own gatsby-ssr.js file. By using gatsby-plugin-react-helmet you're ready to go. Your Head component should just work fine.

And how are you looking at the output? With "View source" in the browser? You need to have a look at the .html files in the /public folder.