shouldRenderForClientMixin

shouldRenderForClientMixin.js

var shouldRenderForClientMixin = {
  componentDidMount: function () {
    this.setState({
      renderForClient: true
    })
  },

  shouldRenderForClient: function () {
    return typeof document !== 'undefined' && this.state && this.state.renderForClient;
  }
};

var Map = React.createClass({

  mixins: [shouldRenderForClientMixin],

  render: function() {
    if (!this.shouldRenderForClient()) {
      return <img />;
    }

    return <FancyClientSideMap />;
  }
});

I needed to do something like this because node was throwing an exception when it couldn't find document. Also, when React runs on the client, it seems to call shouldRenderClient before componentDidMount, so there is no state yet to check, which throws an exception that I need to catch.

shouldRenderForClient: function () {
    try {
        return typeof(document) !== "undefined" && this.state.renderForClient;
    } catch (e) {
        return false;
    }
}

@stratospark thanks for testing. you're right of course. I'll change it to:

shouldRenderForClient: function () {
  return typeof document !== 'undefined' && this.state && this.state.renderForClient;
}