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?

Gatsby's helmet plugin has already plugged helmet to gatsby-ssr.js so you shouldn't need to do it, it should work if you include your Head component to your page/template. How are you using your Head component? — Derek Nguyen
@DerekNguyen that is true but the output is still the same - no tags are generated. In theory, logging the meta items via onRenderBody should still work right? <Head /> is loaded into the a page template as a component. — Dylan Peti
Have you tried Helmet.renderStatic() instead? That's what the gatsby plugin use — Derek Nguyen
Ah, that's the production build. I've been running gatsby develop. — Dylan Peti

LekoArts LekoArts · Accepted Answer · 2019-03-06T09:25:28

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.

Gatsby react-helmet not server-side rendering

1 Answers