Логика работы с данными в react приложении
У меня есть достаточно большой массив объектов(122000 элементов). Я сделал два варианта одного компонента для работы с этими данными:
1) Массив данных находится на сервере. С помощью useEffect(func, []) сразу весь массив подгружается при первом рендере компонента и заносится в константу. Далее, когда пользователь начинает вводить в поле input символы, данные из константы начинают фильтроваться определенным образом(это происходит в обработчике поля input) и на экране появляется список из отфильтрованных элементов массива.
2) Массив также находится на сервере, но при каждом пользовательсом вводе происходит запрос на сервер с дополнительным параметром(тем, что ввел пользователь), и, в соответствии с этим параметром, данные фильтруются на сервере и отправляются на клиент, где отображаются также в виде списка.
Клиент написан на react, сервер на nodejs.
Вопрос: с точки зрения производительности, что будет лучше в данном случае? Один запрос на сервер и работа с данными на клиенте или же множество запросов на сервер и работа с данными на сервере?
Ответы (1 шт):
Лучшим вариантом реализации поиска является использование задержки запросов на клиенте и принятие небольшого объекта от сервера.
То есть, на клиенте по мере ввода пользователем символов на сервер отправляются запросы поиска. Запросы с клиента отправляются при остановке пользователем ввода более чем на 2 секунды к примеру и минимум раз в 4 секунды, если поисковой запрос длинный. Для этого можно использовать use-debounce.
Ответ от сервера должен содержать минимум вариантов ответа и не нагружать пользователя. Скажем 10 подходящих вариантов.
Если пользователю недостаточно 10 предоставленных ответов, то он может воспользоваться кнопкой ещё, загрузив ещё варианты.