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

Имеем каталог с фильтрами, элементов в каталоге около 400. Как быстрее загружать в него данные?
Как это происходит сейчас - пользователь ставит параметры в фильтре, сайт делает запрос ajax, получает новый массив с данными, передает во vue которая и перерисовывает каталог. Проблема в том что работает это не очень быстро. Сервак стабильностью не отличается и может отдать за 200мс а может за 2000мс при одинаковых запросах.
Будет ли быстрее при загрузке сайта передать весь массив во vue и фильтровать уже на стороне vue, не используя ajax?
И как привильно делать такие каталоги при небольшом количестве элементов (меньше 1000) и большом(больше 10000)?
  • Вопрос задан
  • 847 просмотров
Решения вопроса 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
Похожие вопросы