Загрузка всех данных, локальная фильтрация ИЛИ Загрузка только отфильтрованных данных

Question

У меня есть веб-приложение магазина React, Firebase на задней панели с Firestore в качестве базы данных.

У меня есть 500 предметов для магазина. Я ожидаю клиентов только для настольных компьютеров.

Лучше ли практиковать:

• Загрузка всех элементов сразу в локальный массив объектов при начальной загрузке и использование .filter() для фильтрации; OR
• Вызовите базу данных для возврата только отфильтрованных данных всякий раз, когда клиент фильтрует.

Для загрузки всего сразу, я думаю:

1. Это ( возможно ) быстрее для каждого фильтра, так как это делается локально. Я не уверен, в каком размере массив объектов фильтруется медленнее, чем получение ответа от сервера. Так как клиенты будут только Desktop, я думаю, что довольно большой.
2. Не требует связи с сервером для каждого фильтра. Firestore также подсчитывает квоты на количество операций чтения, записи или транзакций, поэтому это должно уменьшить использование моей квоты.
3. Повторение одного и того же фильтра на том же клиенте не требует повторного запроса тех же данных. Как и в случае с клиентом, можно выполнить фильтрацию, затем сбросить фильтр и снова выполнить тот же фильтр.

Для загрузки только отфильтрованных результатов, я думаю:

1. Фильтрация на сервере и ответ ( возможно ) быстрее, чем .filter() локально.
2. Клиенты всегда получают самую актуальную информацию.
3. Быстрая начальная загрузка.

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

Я просто сравниваю ванильный материал, поэтому сзади нет ни Algolia, ни Elastic, ни библиотек поиска и индексации.

Answer 1

500 - это очень небольшое количество документов. Современные настольные системы не будут иметь проблем с сортировкой и фильтрацией этого списка. Вы можете быть более расстроены счетом из Cloud Firestore за то, что он постоянно сортирует и фильтрует все ваши запросы, чем за счет однократной загрузки и выполнения всего этого локально. Хотя это зависит от поведения пользователей вашего приложения (а также от размера документов и скорости их соединений).

Вы можете наблюдать некоторые проблемы с производительностью, когда получаете 50 000 элементов (на недорогих настольных ПК), но, вероятно, их недостаточно, чтобы причинить кому-либо неудобства. Попробуйте написать несколько строк кода для сортировки или фильтрации 50 000 случайных целых чисел и посмотрите, сколько времени это займет. Ваш реальный код приложения должен работать не так сильно, как реальные данные.

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

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