Как отрисовать React приложение на сервере после загрузки данных?

Question

[anonimizer_me]

Здравствуйте!
Столкнулся с такой проблемой.
Есть React приложение, которое отрисовывается как на сервере, так и на клиенте.
Но некоторые компоненты в componentWillMount выполняют запрос к апи для получения данных и в связи с этим express.js отдает на клиент страницу, которая отравилась компонентами без данных.

Как лучше построить архитектуру приложения, чтобы на сервере отрисовывалось приложение с данными полученными асинхронно?

Для роутинга использую react-router-component

Answer 1

[Никита Гущин]

Для начала разделите ваши компоненты на умные и глупые - https://medium.com/@dan_abramov/smart-and-dumb-com... .

Таким образом хэндлеры ваших роутов должны быть преимущественно умные. В каждом умном компоненте, которому нужны данные для рендера, можно сделать метод fetchComponentData (в нем будут выполнятся асинхронные запросы).

Далее берете реакт роутер версии 1.0.0 (сейчас актуальна 1.0.0-rc1) и прямо в документации рассказано как сделать сервер рендеринг. В renderProps есть список компонентов-хендлеров роута - можно пробежаться по ним и вызвать вышеупомянутую функцию fetchComponentData:

match({ routes, location }, (error, redirectLocation, renderProps) => {
    if (redirectLocation)
      res.redirect(301, redirectLocation.pathname + redirectLocation.search)
    else if (error)
      res.send(500, error.message)
    else if (renderProps == null)
      res.send(404, 'Not found')
    else {
        const promises = _.map(
            _.filter(renderProps.components, component => component.fetchComponentData),
            component => component.fetchComponentData(/*тут можно передать данные роута*/)
        );
        Promises.all(promises).then(() => res.send(renderToString(<RoutingContext {...renderProps}/>)));
    }
  })