Как в Реакте получать данные с сервера без дёрганий?

Question

[lil_web]

Я переписываю веб-приложение на Реакт. Данные приходят с бэкенда, мы отображаем их на фронте.

Раньше не было проблемы. Данные приходили, как загружалась страница. А теперь загружается страница, затем появляются данные, происходит скачок на экране. Если блоков с данными много, весь сайт трясётся. Стало хуже.

Как загружать данные с сервера, избегая скачков? Я думал в этом поможет Гетсби, но, в итоге, запутался с ним. Вообще, Гетсби приоритетнее Некста, потому что первый требует меньше ресурсов. Подскажите, пожалуйста.

UPD. Нашёл видео разраба Гетсби Loading and Filtering API Data. Это то?

Comments

[ⓒⓢⓢ]

Как в Реакте получать данные с сервера без дёрганий?

UPD. Нашёл видео разраба Гетсби Loading and Filtering API Data. Это то?

по вашей ссылка, там даже сам участник конференции дёргается, ... ничем вам это не поможет в текущем вопросе

[lil_web]

ⓒⓢⓢ, так страница загружается сразу с данными, обращение к апишке в gatsby-node.

Answer 1

[McBernar]

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

Comments

[lil_web]

Это основной контент. Пользователь должен увидеть его сразу.

[McBernar]

lil_web, разве есть какая-то ощутимая разница между тем — будет ли юзер смотреть секунду на белый экран или ту же секунду на заглушки?

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

Ну и посты в фейсбуке тоже являются главным контентом на экране, к слову.

[lil_web]

McBernar, спасибо за рассуждение, но вот Яндекс отказался от прелоадера. В их случае готовый серп оказался на тестировании лучше.

[McBernar]

lil_web, интересно, не знал об этом, спасибо.

[lil_web]

McBernar, пожалуйста: источник.

Старший разработчик из Яндекс-поиска Антон Виндоградов о прелоадере и загрузке частями: «По экспериментам людям не нравится, и выглядит по ощущениям дольше загрузка такая».

Answer 2

[Дмитрий Свиридов]

Попробуй NextJS. Я использую - очень неплохо

Comments

[Дмитрий Свиридов]

Илья, получается, что на сервере работает js-скрипт, который висит на 80-м порту. Когда приходит запрос (открытие страницы сайта), рендерится js-страница на сервере (в том числе в getInitialProps делаются запросы к API бэкенда) - и отдается готовый html. При последующих переключениях между страницами делаются уже обычные ajax-запросы и рендерится все в браузере. То есть да, для первоначальной загрузки страницы запросы к API делаются как бы прямо с сервера.

[lil_web]

Дмитрий Свиридов, спасибо. Боюсь на Некста не хватит ресурсов: у нас большая посещаемость,— поэтому смотрю в сторону Гетсби.

[Дмитрий Свиридов]

lil_web, чем Гетсби в данном случае эффективнее?

[lil_web]

Дмитрий Свиридов, кажется, он меньше напрягает сервер.

[lil_web]

Дмитрий Свиридов, ну вы имели в виду data-fetch?

[Дмитрий Свиридов]

lil_web, я имел в виду NextJS. То, что ты скинул - это один из примеров, там их много. Да, я примерно так и юзаю) Я предложил NextJS, потому что он решает твою проблему.

кажется, он меньше напрягает сервер

Кстати, это откуда инфа? Принцип там, по идее, тот же самый