React: как использовать браузерные компоненты на сервере?

Question

[dbewedb]

Добрый день!
Пытаюсь прикрутить серверный рендеринг к приложению на React/Redux.
За основу взят пример из документации Redux
и пример isomorphic-react-example

Проблемный компонент: yandex-map-react

Псевдокод на coffescript:

{ 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 собирает без проблем полностью рабочее приложение, а запуск сервера моментально завершается с ошибкой "undefind window ..."

Поделитесь опытом как вы подключаете подобные компоненты в свои приложения?

Comments

[copal]

А Вы никак не сможете это преодолеть не переписав 'yandex-map-react' если он действительно обращается к window. Единственное что можно сделать это инициализировать его в методе которые не выполняются на сервере.

[dbewedb]

copal: спасибо, я так и пологал) но надеелся, что есть какие нибудь джедайские практики.

Answer 1

[Роман]

разумеется он ругнется - карты очень сильно зависят от окружения и крайне редко изоморфные.
правильно делать так:

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>
}

Comments

[Роман]

меньше кода но менее надежно и наглядно это использовать флаг `this.isMounted()`

[dbewedb]

Роман: спасибо! На данный момент решил проблему подобным образом, но через переменную окружения. Ваше решение нравиться больше!