react-helmet Meteor Server Side Rendering

Question

I want to implement react-helmet on Meteor. The client side works fine and I can see the tags on the Inspect Element - but how to render it on server side for SEO? I do not understand the documentation.

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

My Code is as follows

index.html (client)

<head>
   <body>
     <div id="target" />
   </body>
</head>

main.js (client)

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx'

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById('target'));
});

I'm using React-Router to render the element to the "target"

main.js (server)

How to get the tags from the server.

import { onPageLoad } from 'meteor/server-render';  
Meteor.startup(() => {

  onPageLoad((sink) => {  

    const helmet = Helmet.renderStatic();
    sink.appendToHead(helmet.meta.toString());
    sink.appendToHead(helmet.title.toString());
  });

});

On the about code helmet.meta.toString() returns empty. I know we need to pass something to let the helmet know the meta tags. But how to do that

Can someone help me understand what I need to write on the server to get this working? Everything except that is working fine.

Do you see the html tags of your components when you view source ? — Muljayan
@Muljayan Just the head and body. Not individual body tags. But I just need to append the meta tags generated by helmet on to the server side rendering of the page. How can I do that using the above files. — squareRoot
blog.meteor.com/meteor-platform-is-still-alive-5f6426644555 This blog on the meteor blog might be helpful. It has an example to use react-helmet — Muljayan
sink.renderIntoElementById('app', renderToString(<App location={sink.request.url} />)); — squareRoot

squareRoot squareRoot · Accepted Answer · 2019-01-09T14:59:01

Finally I found the solution :

The code on the main.js (server) should be the following

import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import  {renderRoutes}  from '../imports/startup/both/routes.jsx'

// ...

onPageLoad((sink) => {  
    const context = {};
    const app = ReactDOMServer.renderToString(
      <StaticRouter location={sink.request.url} context={context}>
        {renderRoutes()}
      </StaticRouter>
   );

    sink.renderIntoElementById('react-root', app);
    const helmet = Helmet.renderStatic();
    sink.appendToHead(helmet.meta.toString());
    sink.appendToHead(helmet.title.toString());
  });

Hope it helps someone who might run into the same issue in the future. :)

react-helmet Meteor Server Side Rendering

1 Answers