react-helmet with react-rails server side rendering

404 Views Asked by At

I'm trying to use react-helmet with react-rails and webpacker with server-side rendering enabled to enable handling the generation of meta tag when user navigates on different routes. I'm able to generate the page on the server and get the content of the page, but the meta tags react-helmet is responsible for generating them are missing. Although on the client side react-helmet does is job perfectly, on the server side the meta tags are not delivered. Is there any reason why react-helmet is not being executed on the server side while the whole other parts of the application does ?

// App.js
// if window defined else ...

<StaticRouter location={this.props.path} context={context}>
  <Route path='/' render=>{ routerProps => <Landing {...routerProps}/>}/>
</StaticRouter>

// Landing
// render ...

<section>
  <Helmet
    title={'Title'}
      meta={[
        {"name": "robots", "content": "index, follow"},
        {"property": "og:site_name", "content": ""},
        {"property": "og:title", "content": ''},
        {"property": "og:type", "content": "website"},
        {"property": "og:url", "content": this.props.path },
        {"property": "og:description", "content": '...'},
      ]}
  />
  ...
</section>

// views/main.slim

= react_component "App", {} , { prerender: true }

// app/javascript/packs/application.js

var componentRequireContext = require.context("my_app", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

Any help would be greatly appreciated. Thanks.

0

There are 0 best solutions below