title: ReactJS server side rendering and componentDidMount method
body: <p>I am new to React, so please don't judge strictly.
  I am rendering my React app on server and want execute code on frontend side.
  Application renders properly with styles and without warnings or errors, though with empty state since I am using API which should execute on front side and it is OK for now.</p>
  
  <p>as I understand server renders component and since server rendered and mounted component on server and it is not calling <code>componentDidMount()</code> method
  which should do my API calls and other staff</p>
  
  <p>this is my component</p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  import SpComparison from './spComparison.jsx';
  import Comparison from './comparison.jsx';
  import AnalystRatings from './analystRatings.jsx';
  
  
  export default class Insights extends React.Component {
  constructor(props){
      super(props);
      this.state = {
         charts: []
      }
  
      let _this = this;
  }
  
  componentDidMount() {
      console.log("I want to do log on front end side, but can't")
  }
  
  render () {
      let charts = this.state.charts.map(function(i){
          if (i.type == 'comparison'){
              return &lt;Comparison key={ i.id } config={ i.config } /&gt;
          }
          else if (i.type == 'sp-comparison'){
              return &lt;SpComparison key={ i.id } config={ i.config } /&gt;
          }
          if (i.type == 'analyst-ratings'){
              return &lt;AnalystRatings key={ i.id } config={ i.config } /&gt;
          }
      });
  
      return (
          &lt;div id="insights" className="container"&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-md-3 hidden-md-down" style={{
                      marginTop: 10
                  }}&gt;
                      &lt;ul className='finstead-tabs'&gt;
                          &lt;li className="finstead-tabs-header"&gt;
                              Categories
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href='' className="finstead-active-tab"&gt;Performance&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=''&gt;Financial&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=''&gt;Valuation&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=''&gt;Shares&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=''&gt;Outlook&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className="col-xs-12 col-md-9"&gt;
                      { charts }
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
   }
  }
  </code></pre>
  
  <p>I guess I am doing it not right way, so please help me.</p>
  
  <p><strong>NOTE</strong></p>
  
  <p>In highest level component I haven't called <code>ReactDOM.render</code> may it cause this behaviour?</p>
  
  <p><a href="https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app" rel="noreferrer">tutorial</a> that I used for example</p>