SSR Helmet tags not getting updated

[aronddadi]

Hi

As mentioned in the title, the meta tags delivered by the ssr are not dynamic/the correct ones.

So on this project I'm working on we have meta tags (for SEO purposes) which should be dynamic. I know todays crawlers also index client-sided code but for faster indexation, good practice, and because I'd like to know how it works, I still want to do it.

Helmet meta tags get updated to the correct ones on the client side, but on the ssr the meta tags that are sent are the generic ones from the app component, and not the ones from the nested components within.

Code snippet from the server.jsx

export default function serverRenderer() {
  return (req, res) => {
    const context = {}
    const browserLanguage = 'en'
    const componentTree = (
      <ApolloProvider client={client}>
        <IntlProvider locale={languageSelected} messages={bob}>
          <StaticRouter location={req.url} context={context}>
            <ThemeProvider theme={theme}>
              <App auth={auth} lang={browserLanguage} />
            </ThemeProvider>
          </StaticRouter>
        </IntlProvider>
      </ApolloProvider>
    )
    const sheet = new ServerStyleSheet()
    const markup = renderToString(
      sheet.collectStyles(componentTree)
    )
    const styles = sheet.getStyleTags()
    const helmet = Helmet.renderStatic()

    const toBeSent = Template({ markup, styles, helmet})
    if (context.url) {
      res.writeHead(301, { Location: context.url })
      res.end()
    } else {
      res.send(toBeSent)
    }
  }
}

In the App component there are generic meta tags + header - main(routes/views) + footer and on the nested views that are shown like I said the meta tags do get updated on the client side, not on the server side, whereas from what I've been reading and hearing when asking around, as the code is, it should be working.

I tried implementing react-helmet-async, but it did not seem to get me further + from what I've read in the documentation, react-helmet does support child components overwriting helmet meta tags with the same name from parent component.

Things I'm considering doing but which I don't think are the right answer/ right practices: Making almost all the information of the meta tags states and then passing a method which can modify those to the children OR Make a lot of if elses which give the right meta tags depending on the req.url/ window.location.href

Please help and have a good day!

[annoyingpieceofshit]

Funny, I have the same problem

I'm leaving my stamp for when captain savoir comes around

good luck with your 'project'

[digitaljohn]

Exactly the same issue here.

I'm using Helmet, Apollo and Styled Components just like you.

[falloutghost]

+1, same behaviour for me.

Update: switching to react-helmet-async solved things for me

[aronddadi]

pls help, react-helmet-async is not helping

[divmgl]

I'm having the same exact problem. I realize this was already a few months ago so you may not be experiencing this problem but are you still having this issue? If not, what was the fix? I've basically given up on this and now I'm generating the head code both on the server and with the Helmet code on the client-side.

[divmgl]

To anyone still looking at this, I had to switch to react-helmet-async.

[aronddadi]

Well, for my project I needed to header tags to be set on the SSR based on queried data, react-helmet-async did not help.

Since then I have transferred the project to next JS and it seems to be working, my issue was not with react Helmet, but with SSR in general since the helmet tags did get updated to the correct ones after the data had been querried successfully on the client side.

But from what I understood, react-helmet-async shouldn't be necessary since header tags get overwritten by child components if they are present, I might be wrong though.

[AntonS86]

for dynamic update insert this entry in the tag: data-react-helmet="true"

https://github.com/nfl/react-helmet/blob/420810c644f94c3743f7b088321dbd62a8037b7b/src/HelmetUtils.js#L422

[kateile]

Same problem here, where to use that @AntonS86 ?

[princesodhi]

I am also having the same issue

[michaelolo24]

These might be worth a look:

See: https://github.com/facebook/create-react-app/issues/1261 https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

[Zahra-8d]

Has anyone found a fix for this? I am having the same problem.

[debjits1]

Has anyone found a solution?

[fayismahmood]

for dynamic update insert this entry in the tag: data-react-helmet="true"

https://github.com/nfl/react-helmet/blob/420810c644f94c3743f7b088321dbd62a8037b7b/src/HelmetUtils.js#L422

How it's?