11

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?

Mo.
  • 26,306
  • 36
  • 159
  • 225
Appa
  • 457
  • 6
  • 13
  • 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 Mar 06 '19 at 09:10
  • @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? `

    ` is loaded into the a page template as a component.

     – Appa Mar 06 '19 at 09:15
  • Have you tried `Helmet.renderStatic()` instead? That's what the [gatsby plugin use](https://github.com/gatsbyjs/gatsby/blob/8b7d831e1c2f094b9d16d6a7d4ec9618650ac417/packages/gatsby-plugin-react-helmet/src/gatsby-ssr.js#L8) – Derek Nguyen Mar 06 '19 at 09:20
  • @DerekNguyen yes sorry, wrote the method incorrectly here. – Appa Mar 06 '19 at 09:22
  • just quickly test it out with your code, works fine for me — it ought to be the way you use the component – Derek Nguyen Mar 06 '19 at 09:24
  • Hmm @DerekNguyen you might be onto something, how are you loading the react-helmet head on the client? Is it nested or included in the page template? So ideally, the `public/index.html` file should contain the tags. – Appa Mar 06 '19 at 09:29
  • wait nvm, actually it's logging out empty arrays even though the tags show up in rendered html – Derek Nguyen Mar 06 '19 at 09:30
  • That suggests that the client code is working correctly and that the server side rendering isn't generating the tags at all right? – Appa Mar 06 '19 at 09:33
  • No I think server side rendering is generating the tag, it's just that custom ssr code doesn't log it out (gatsby build) – Derek Nguyen Mar 06 '19 at 09:34
  • Your public/index.html file contains the tags? Is there anyway I can see this setup? – Appa Mar 06 '19 at 09:35
  • You can see the build I use to test it here, check the SEO component in index.js https://github.com/d4rekanguok/so-gatsby-example/tree/react-helmet – Derek Nguyen Mar 06 '19 at 09:40
  • Went to test it but it looks like you've reset the HEAD – Appa Mar 06 '19 at 09:51
  • Hmm @DerekNguyen I tested the setup inside your codebase with the SEO component containing the code above but same result. It looks like public/index.html still doesn't contain a tag for `title=the title is big` or meta tag for `name="description" content="the content"` – Appa Mar 06 '19 at 09:57
  • Perhaps you've broken something in the pipeline? I can see it in my build: https://imgur.com/zbmhWkO – Derek Nguyen Mar 06 '19 at 10:01
  • 1
    Ah, that's the production build. I've been running `gatsby develop`. – Appa Mar 06 '19 at 10:30

1 Answers1

2

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.

LekoArts
  • 1,521
  • 1
  • 7
  • 7
  • 5
    Correct but in theory I should still be able to log the helmet instance here. In any case, I'm looking at the output the same way you mentioned. Unfortunately all my public/index.html contains is an empty `` – Appa Mar 06 '19 at 09:31
  • I'm having the same problem, @DylanPeti -- did you ever figure it out? – cjones26 Apr 05 '21 at 21:21
  • same here, i have a similar setup and the same problem – nerdess Apr 06 '21 at 11:11
  • @cjones26 gosh this was so long ago I can't remember if I resolved it correctly. If you read the comments above I recall compiling the code in production mode instead of develop and I think that actually generated the right tags. – Appa Apr 06 '21 at 22:54
  • 1
    @DylanPeti -- I was able to figure it out -- I didn't put the code in my Layout and was on a different page, so it ended up being just a silly mistake. Thanks for answering, at least! – cjones26 Apr 07 '21 at 23:06