Как одновременно использовать ренедеринг на сервера и на клиенте в reactjs?

Question

[vilix]

Я уже два дня пытаюсь решить проблему которая у меня произошла при кастомизации данного туториала под свою задачу, и в бессилии решил спросить здесь. Сам туториал получился без проблем.

Мой компонент просто выводит данные из бд в виде списка, и по интервалу подгружает по АПИ новые данные - элементарная задача, которую я реализовал с помощью реакта, но я захотел рендерить компонент предварительно на сервере. И вот в чем суть проблемы, на сервере я успешно рендерю мой реакт компонент передавая ему данные из БД, но на клиенте данные из БД получаются через некоторое время (пока АПИ запрос пройдет), и получается, что у меня на странице сначала отображается все как надо, потом все пропадает на доли секунды (срабатывает render реакта на клиенте с пустыми state и props) и потом когда ответ от сервера приходит клиенту, снова все в порядке.

И я никак не могу понять как заставить react не рендерить ничего, пока он не получит данные от сервера, ну и если эти данные совпадают, то по идеи react и не должен ничего рендерить, чек-сумма совпадет, но вот в самом начале, когда ответа еще нету, чек-сумма естественно всегда не совпадает и реакт на клиенте рендерит пустой элемент.

Логика вроде здравая: реакт на сервере рендерит список с данными, реакт на клиенте ждет ответа от сервера на get api запрос, и если данные отличаются реакт изменяет DOM.

Но вся проблема, что реакт всегда взывает render в самом начале, а в самом начале ответ от сервера естественно еще не пришел. Например можно послать get запрос в componentWillMount, но как заставить init render подождать выполнения этого запроса я не знаю..

Заранее спасибо за ваши ответы, надеюсь я с горем пополам смог выразить суть своей проблемы.

UPD: Как возможный вариант решения, это поместить мои данные на страницу в виде json, тогда я смогу использовать такие же props для инициализации на клиенте как на сервере , но не топорно ли это?

Comments

[Сергей Протько]

вы же понимаете что это весьма сложная задача? Вам реально нужна изоморфность или вы просто балуетесь?

[vilix]

Сергей Протько: Если это можно сделать, то я хочу понять как, пока мне это мне не критично, но в будущем я уверен, что изоморфность мне понадобится. Теоретически конкретно эта задача не должна быть сложная.

[copal]

vilix: я столкнулся с той же проблемой, только у меня ещё и данные лежат не на том сервере на котором происходит прирендер. Но решение очень простое, все состояния выносить в store, которые грузятся до начала рендера.

[vilix]

copal: спасибо, возьму на заметку, я так понимаю store это из flux да? просто сам flux не использовал никогда.

[copal]

vilix: в моем понятии store это все то что хранит данные, которые получают компоненты.

Answer 1

[vilix]

Нашел еще одно решение для себя, из за того что мне никак не давало покоя мысль о том, что данные есть уже на пререндр странице и мне их нужно дублировать в script. И я подумал, почему бы в getInitialState, не парсить их прямо из HTML, и это работает.

Но я думаю это решения подойдет не для всего, подводные камни которые я вижу такие:
1. Во первых необходимо реализовывать логику самого парсинга, которая не всегда может быть тривиальной
2. Если объем данных большой, парсинг может занимать ощутимое время и в это время компонент не будет отвечать
3. Нужно хранить все нужные невидимые данные для пользователя в атрибутах тэгов постоянно, а не только при серверном пререндеринге, чтобы чек-сумма markup-ов совпадала.

В итоге у меня получилось нечто такое (может кому пригодится):

getInitialState: function () {
    if (!isNode) {
      var data = [];
      $('#dataId').map(function(key, element) {
        var id = element.getAttribute('data-reactid');
        id = id.substring(id.indexOf('$')+1);
        var title = element.innerHTML;
        data.push({id: id, title: title})
      });
      return {data: data}
    }
    return {};
  },

Пожалуйста напишите в комментариях если я что-то упустил важное в минусах данного подхода или наоборот надумал лишнее.

Comments

[vilix]

Артём Петренков: Спасибо, id конечно можно вынести в атрибуты отдельно и не завязываться на реактид, но "если некоторые данные будут изначально не отображены на странице (но существовать)," про это я не задумывался даже.

Answer 2

[Антон]

Советую посмотреть на https://github.com/goatslacker/iso