Server side rendering React components that loads state through Ajax
<p>I'm struggling to make my component work on both client and server side.</p>

<p>This is the code for my component:</p>

<pre><code>export default class extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            title: props.params.title,
            message: props.params.message
        };
    }

    componentDidMount() {
        $.ajax({
            url: "/get-message",
            success: function (result) {
                this.setState({
                    title: result.title,
                    message: result.message
                });
            }.bind(this),
            cache: false
        });
    }

    render() {
        return (
            &lt;div&gt;
                &lt;h2&gt;{this.state.title}&lt;/h2&gt;
                &lt;h3&gt;{this.state.message}&lt;/h3&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>It works ok. When it gets rendered though client side, it shows both <code>h2</code> and <code>h3</code> empty and then they are filled when the ajax call returns.</p>

<p>When it gets rendered though the server, I already get those props filled and the html sent to the client is already completed and don't need anything extra.</p>

<p>The problem is that when it gets rendered on the server, I get the error message on the client: </p>

<pre><code>Warning: React attempted to reuse markup in a container but the checksum was invalid. [...]
</code></pre>

<p>It then calls the ajax method again and re-renders everything.</p>

<p>So how should I handle such case? Is there a way to tell React that this component was rendered on the server accept it and not call the <code>componentDidMount</code> method?</p>