React: how to use browser components on the server?

Question

CoffeeScript

Good afternoon!
I'm trying to add server rendering to a React/Redux app.
Based on an example from the Redux documentation
and an example of isomorphic-react-example
Problematic component: yandex-map-react Coffescript
pseudocode:

{ Map, Marker } = require 'yandex-map-react'

class App extends React.Components
  render: ->
    <div>
      <h1>Данные на карте:</h1>
      <Map center={[55.754734, 37.583314]} zoom={10}>
        <Marker lat={@props.lat} lon={@props.lon} />
      </Map>
      <p>Немного поясняющего текста</p>
      
    </div>

Webpack builds a fully working application without any problems, and the server startup immediately fails with the error "undefind window ..."
Share your experience, how do you connect such components to your applications?

Answer 1

Of course, he will swear - the cards are very dependent on the environment and are extremely rarely isomorphic.
do it right like this:

getInitialState() {
   return {readyToRenderMap: false}
}

// DOM become available after component is mounted
// map can be displayed safely since componentDidMount does not get called in server environment
componentDidMount() {
  this.setState({readyToRenderMap: true})
}

render() {
  return <div>
      <h1>Данные на карте:</h1>
      {this.state.readyToRenderMap &&
        <Map center={[55.754734, 37.583314]} zoom={10}>
          <Marker lat={@props.lat} lon={@props.lon} />
        </Map>
      }
     {!this.state.readyToRenderMap &&
        Loading... (or some spinner component. whatever.)
     }
      <p>Немного поясняющего текста</p>
      
    </div>
}