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

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

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

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

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

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

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

UPD: Как возможный вариант решения, это поместить мои данные на страницу в виде json, тогда я смогу использовать такие же props для инициализации на клиенте как на сервере , но не топорно ли это?
  • Вопрос задан
  • 1205 просмотров
Решения вопроса 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 {};
  },


Пожалуйста напишите в комментариях если я что-то упустил важное в минусах данного подхода или наоборот надумал лишнее.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SPAHI4
@SPAHI4
реактовцы - это не девы, а прокидыватели пропсов
Советую посмотреть на https://github.com/goatslacker/iso
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы