Search code examples
reactjsreact-helmet

meta tag server side rendering

I am using react helmet and am a bit lost with regards to the server side rendering. If I view elements in google console I can see the title and meta description but when viewing the page source they are not there.

I am using a Node.js backend with express to create an API. The React app is just a frontend application which gets data from the Node.js API.

In React I simply have:

import { Helmet } from "react-helmet";
render() {
   return(
      <>
        <Helmet>
          <title>My site title</title>
          <meta name="description" content="Helmet application" />
        </Helmet>
      </>
    )
}

The direct link to the server side example shows some code which I don't really know what to do with. I think the word 'server' is throwing me off because I am thinking that I need to put some code on my Node.js server but perhaps that is not the case?

Solution

  • Indeed, Helmet.renderStatic() method will collect all tags corresponding to the page you are requesting.

    If you want to see those tags on the server side as well (source code), you need to, in your server file:

    1. Call const helmet = Helmet.renderStatic()

    2. From helmet get helmet.title.toString() and helmet.meta.toString()

    3. Append those to your HTML just like https://github.com/nfl/react-helmet#server-usage As string input describes.