Issue with loading dynamic meta tag value in react app using server side rendering

Question

I have the react application uses the server side rendering. I used react-helmet as for display dynamic meta tags. Everything is setups perfectly. Also the dynamic meta tags are being display to the browser correctly but at server side it takes values undefined. Is anyone tell me its solution what to do.

For example :

var React = require('react');
var Helmet = require('react-helmet');

var About = React.createClass({
  getInitialState: function(){
    return {
      title: "",
      description: "",
    }
  },
  componentDidMount: function(){
    $.ajax({
      url: api_url+'/get_meta',
      type: 'POST',
      dataType: 'json',
      async: false,
      success: function( response ) {
        if( response.status==200 ){
          this.setState({title: response.title, description: response.title });
        }
      }
    });  
  },
  render: function() {
    var title = this.state.title;
    var description = this.state.description;
    return (
        <div>
          <Helmet
            title={title}
            meta={[
              {"name": "description", "content": description }
            ]}
          />
          <p>
            This is the title page
          </p>
        </div>
    );
  }
});

module.exports = About;

When I view the source it doesn't display anything in meta tag, but when I inspect the browser element it shows the meta tag value. After debugging a while, I found the issue, the component is renders both server and client side, So at server side it is rendering the component with initial state only, that's why the value is not being display.

Please anyone suggest what to do?