Реагировать JS изоморфный рендер

Question

ReactJS, оригинальный Flux, реагирующий маршрутизатор, nodeJS, socket.io Все обновлено.

Если я отключаю JavaScript в браузере, то отображается только статический код.

Во время рендеринга на стороне сервера ComponentWillMount а также render методы запускаются, но не ComponentDidMount,
Даже если я ставлю логику Flux в ComponentWillMount метод, ничего не происходит: действие вызывается, но socket.io не отправляет запрос на сервер для получения данных из базы данных. Это означает, что данные не извлекаются из базы данных и ничего полезного для поисковых систем не отображается. Если JavaScript включен, все работает отлично.

Вот важные фрагменты кода:

Составная часть. Добавить слушателя и вызвать действие:

componentDidMount() {
    StoreUser.addChangeListener(this._onChange);
    Actions.getUser(this.props.params.userid)   
}

Действие клиента запрашивает у сервера данные пользователя:

function _getUser (userid) {
  socket.emit('getUser', userid)
}

до этого места рендеринг на стороне сервера работает, но сам сервер не получил getUser событие, так что дальше ничего не происходит. Опять же, если JavaScript включен в браузере, все это прекрасно работает. Сервер принимает этот вызов и возвращает данные пользователя.

Как заставить сервер получать это событие, возвращать данные пользователя и обрабатывать их перед отправкой клиенту? Как альтернатива, может быть есть другой способ сделать его дружественным SEO?

Answer 1

РЕАКТ componentDidMount Хук жизненного цикла не называется серверной стороной, как указано в документации.

Если вам нужно получить данные и использовать их на стороне сервера в render метод компонента, вам нужно передать эти данные как props во время первоначального рендеринга. Это означает, что вы не можете получить его во время componentWillMount, даже если крюк называется.

Чтобы достичь того, чего вы хотите, вам нужен код на стороне сервера, чтобы:

• определить, какие компоненты будут представлены
• отправьте правильные действия, чтобы ваш магазин был правильно заполнен
• рендеринг ваших компонентов только тогда - так как данные доступны для передачи вашим компонентам при первоначальном рендеринге

Детали того, как этого добиться, будут, конечно, зависеть от вашей реализации потока, среды, которую вы используете на стороне сервера, и т. Д.