Я относительно новичок в ReactJS и был соблазнен простотой реализации серверной рендеринга, чтобы сократить время до первого твита. Я запускаю стек Node -Express-React, который предварительно создает разметку на сервере с помощью React renderComponentToString.
Он отлично работает, когда компоненты могут отображаться синхронно, однако я боюсь, когда дело доходит до реализации компонентов, заполненных ajax (однако это относится к любой асинхронной операции во время инициализации компонента, например websocket).
Возьмите пример с сайта React: http://facebook.github.io/react/tips/initial-ajax.html
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
Он не будет работать на сервере, поскольку компонент componentDidMount никогда не запускается при использовании renderComponentToString. Этот простой случай можно обойти, используя ту же самую оболочку HTTP-запроса на клиенте и на сервере (вместо использования jQuery $.get), а также путем предварительной выборки данных до создания экземпляра компонента и передачи его в качестве опоры.
Однако в реальном сложном приложении асинхронные зависимости могут быть очень сложными, и предварительная выборка не очень подходит для потокового подхода к построению структур React. Как я могу реализовать асинхронный шаблон инициализации в React, который может быть отображен на сервере без фактического монтирования чего-либо (т.е. Эмуляции DOM a la PhantomJS, что является всей точкой использования renderComponentToString)?