Как выполнить action до рендеринга с сервера?

Question

[Denis Sakharov]

Имеется приложение react + redux с серверным рендерингом.
В нем есть компонент в который выводится список пользователей получаемый с api.
Action для запроса к api вызывается с помощью componentWillMount().

Сейчас получается так, что запрос к api выполняется всегда на клиенте, а хотелось бы чтобы при открытии страницы site/users с сервера приходил уже готовый html c пользователями.

Собственно вопрос: как выполнить action на сервере и отдать пользователю страницу с результатами?

Comments

[dummyman]

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

[dpismenny]

dummyman: другими словами, ваш посыл - не используйте react, если вы адекватный девелопер?

[dummyman]

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

То есть, изначально, ECMAScript2015 дает почти неограниченные возможности. Часто бывает, что используют фреймворки преследуя тупо организацию кода. Накладывая реализацию проекта под шаблон определенного фреймворка приходится мириться со всеми его несовершенствами.

Считаю, что надо учиться оформлять код по возможности без них. Даже, используя, например, jquery для уменьшения сроков сдачи проекта, все равно, в процессе continous integration по возможности со временем шаг за шагом избавляться от зависимостей.

Answer 1

[Islam Ibakaev]

// Register server-side rendering middleware
app.get('*', (req, res) => {
  if (__DEV__) {
    webpackIsomorphicTools.refresh();
  }

   const store = configureStore();

  // If __DISABLE_SSR__ = true, disable server side rendering
  if (__DISABLE_SSR__) {
    res.send(renderHtmlPage(store));
    return;
  }

  const memoryHistory = createMemoryHistory(req.url);
  const history = syncHistoryWithStore(memoryHistory, store, {
    selectLocationState: state => state.get('routing').toJS(),
  });

  // eslint-disable-next-line max-len
  match({history: memoryHistory, routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message);
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (!renderProps) {
      res.sendStatus(404);
    } else {
      // Dispatch the initial action of each container first
      const promises = renderProps.components
        .filter(component => component.fetchData)
        .map(component => component.fetchData(store.dispatch, renderProps.params));
     
      // Then render the routes
      Promise.all(promises)
        .then(() => {
          // Using the enhanced history of react-redux-router to instead of the 'memoryHistory'
          const props = Object.assign({}, renderProps, { history });
          const content = renderToString(
            <Provider store={store}>
               <RouterContext {...props} />
            </Provider>
          );

          res.status(200).send(renderHtmlPage(store, content));
        });
    }
  });
});

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

class UsersPage extends React.Component {
	
	static async fetchData(url) {
		try {
			const res = await axios.get(url);
			const users = res.data 
		} catch(err) {
			console.error(err.message);
		}
	}
	
	componentDidMount() {
		this.fetchData(url);
	}
	
	render() {
		return (
		 // whatever
		);
	}
}