Где правильней делать постраничный вывод и фильтры списков — back-end или front-end?

Question

[Urukhayy]

Приложение в MEAN-stack. На страничку нужно выводить список (в таблице) с большим количеством данных. Требуется также постраничное разбиение таблицы и фильтры по различным столбцам.

Вариант 1:
Получать на front-end очень много данных (сразу на 10 страниц), и делать пагинацию на frontd-end, та же история и с фильтрами. То есть фильтруется уже по полученным данным.

Вариант 2:
Получать данные только для первой страницы, подгружать при запросе с сервера данные для других страниц. При фильтрах тоже подгружать новые данные с сервера.

Comments

[sim3x]

Конкретнее
Сколько кб в варианте 1 и 2

Сколько обойдется цпу тайм 1 и 2

10 страниц - не много, 10к сраниц по 1мб - много

Answer 1

[Дмитрий Гусев]

По хорошему, это делается так:
Фронт-енд отвечает только за показ страницы по заданым фильтрам

Все данные запрашиваются на бекенде в формате

{
skip: %Пропущенные страницы% * %элементов на страницу%, 
limit: %элементов на страницу%, 
filers: [ваши фильтры]
}

Бекенд соответственно делает выборку согласно полученым фильтрам с учетом skip и limit (монга их умеет)

Answer 2

[Антон Артёмов]

до 10000 записей я обрабатываю на фронте. Более 10 тыщ, на бэке. Это при условии, что я заранее точно знаю лимит записей в проекте. Если лимит не знать (база комментов, юзеров), то на бэкенде делать.

Comments

[Urukhayy]

А почему именно 10000? Есть какой-то метод вычисления?
И почему Google не использует метод загрузки пачками? Он для каждой страницы делает HTTP-запрос.

[Антон Артёмов]

Например лог событий, который чистится по расписанию. Тут точно можно знать, что больше X записей быть не может.
Закона никакого нет. Все зависит от производительность клиентских машин. Браузер спокойно обрабатывает до 10 тысяч записей. Без заметных зависаний. Это быстрее, чем ajax запрос новыой страницы. А если клиентов тысячи, то и серверу спокойнее будет. Он отдаст каждому по порции и сидит себе курит.

[Ярослав Сиваков]

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