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

Имеем каталог с фильтрами, элементов в каталоге около 400. Как быстрее загружать в него данные?
Как это происходит сейчас - пользователь ставит параметры в фильтре, сайт делает запрос ajax, получает новый массив с данными, передает во vue которая и перерисовывает каталог. Проблема в том что работает это не очень быстро. Сервак стабильностью не отличается и может отдать за 200мс а может за 2000мс при одинаковых запросах.
Будет ли быстрее при загрузке сайта передать весь массив во vue и фильтровать уже на стороне vue, не используя ajax?
И как привильно делать такие каталоги при небольшом количестве элементов (меньше 1000) и большом(больше 10000)?
  • Вопрос задан
  • 887 просмотров
Решения вопроса 1
@AlexndrNovikov
Senior Software Engineer epam.com
Пара кейсов, после которых идея "передать на фронт и фильтровать там" перестает казаться такой хорошей

1) Прилетел массив на 10 000 элементов. Клиент зашел с Samsung galaxy S2 , попробовал загрузить/фильтрануть, посмотрел, как завис браузер, и ушел. Не забывайте, что не все пользователи сидят с десктопов как у разработчиков с 16-32Gb оперативы. Мобилка может поперхнуться банально из-за большого json-а

2) Как только потребуется сделать паджинацию - фильтрация на фронте станет выдавать неожиданно некорректные данные

Пинайте сервер-сайд, пусть разрабы или кэшируют, или расставят индексы в базе правильно, если у них SQL, или перейдут на подходящий поисковый движок с фасетным поиском

Я верю, что можно сделать выдачу и фильтрацию чисто на фронте с любым количеством элементов, если команда состоит из сплошных ниндзя и рокстаров, но практика в 3 подобные ситуации показывает, что в итоге эту фильтрацию придется переписывать как минимум на гибридную (и поддерживать 2 решения, на фронте для малого количества записей, и на бэке для большого), либо полностью на сервер сайд, так как к сожалению команда никогда не состоит из идеальных разработчиков, чаще из обычных живых людей
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@Azperin
Дилетант
"Сервак стабильностью не отличается" какой смысл говорить о технологии, если у вас сервер любую из них похерит ? Еще и не понятно какие элементы, это товар с хедером и мелким описанием или 400 статей по 60к символов. Если уж юзаешь вью, то возьми любой фрейворк поверх него, типа вьютифая, там есть таблицы с уже встроенной пагинацией.
Ответ написан
rim89
@rim89
программист-велосипедист
И как привильно делать такие каталоги при небольшом количестве элементов (меньше 1000) и большом(больше 10000)?

Разбивка по страницам каталога. Фильтрация по 1 кнопке, а не при каждом изменении формы. Далее смотреть структуру запросов к БД.
Ответ написан
uaKorona
@uaKorona
Front-End разработчик
Можно сделать подгрузку данных в фоне.
Т.е. загружаете первый раз только то, что пользователь видит на первой странице. Показываете ему и в фоне отправляете запросы на оставшиеся данные.

Хорошо работает на средних объемах.
Получите бонус по скорости отображения, особенно если данные меняются не часто. Пользователь ушел на другой роут, потом вернулся - вы достали данные из стейта и показали. Никаких запросов.

При этом вам нужно будет:
1. Использовать vuex - чтобы хранить данные в стейте
2. Писать логику поиска/сортировки/фильтрации/пагинации на фронте
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Brandquad Волгоград
от 60 000 до 120 000 руб.
Ingram Micro Cloud Москва
от 170 000 руб.
Fundraise Up Санкт-Петербург
от 170 000 руб.