Иногда смотришь на программистские слова и так хочется, чтобы кто-то взял, да объяснил все простым человеческим языком. Мы решили взяться за эту задачу и сделали обзорную статью, которая поможет узнать все самое необходимое о пагинации. Техническую часть обеспечил Дмитрий — JS developer в Artjoker.
Что такое пагинация?
Пагинация служит для оптимизации просмотра данных, объемных списков и таблиц. С ее помощью React-разработчик делит большой набор данных на маленькие кусочки — страницы, и поочередно их показывает.
Это необходимо для оптимизации скорости загрузки и чтобы вписать данные в размер страницы. Последнее — необходимо, чтобы пользователю было легче охватить блок информации.
Пагинация делится на постраничную и бесконечный список.
В первом случае мы показываем одну страницу за раз — чтобы перейти дальше необходимо воспользоваться постраничной навигацией — кнопками с номерами страниц или «Предыдущая»/«Следующая». Например, как в Google-поиске.
Пример второго случая — Lazy Load. Метод предлагает все веселье мира — нет необходимости перелистывать что-либо, ведь список сам дополняет существующие данные, подгружая новые блоки кусочками. Это происходит, когда пользователь проскролливает к концу. Так устроены многие продукты для смартфонов или та же лента в Instagram.
Разработка web-приложений не обходится без ленивой загрузки, так как она позволяет быстро показать пользователю какие-то данные на экране и заполнить пространство, а остальное — добавлять по мере необходимости.
Реакт применяется для больших и хранящихся на стороне сервера списков. Использование для локальных не всегда имеет смысл, ведь все данные уже есть.
Локальное хранение необходимо, чтобы система могла быстро получить данные и обработать весь массив. Если речь о длинных списках, это не выгодно, так как данные загружаются очень долго, а пользователь, вероятно, не будет просматривать их все. Выгодно загружать только те элементы, которые посетитель смотрит сейчас.
Также пагинация делится на серверную и фронтовую.
Чем отличается server side и frontend side пагинация?
Серверная пагинация на React используется для работы с большими объемами данных. Например, есть тысяча строк таблицы — нет смысла загружать их все на фронтенд, ведь пользователь не просмотрит большинство из них — это слишком большой объем данных. Помимо этого, загрузка и отображение увесистого блока информации занимает слишком много времени. В таком случае используют серверную пагинацию. Это значит, что мы загружаем таблицу частями и постранично отображаем информацию. В какой-то момент пользователь запрашивает следующую часть и только тогда мы начинаем ее загружать.
Фронтовая пагинация на React JS производится, в основном, когда у нас немного данных и мы можем их загрузить и хранить на своей стороне или все они находятся в хранилище на стороне фронтенда. В таком случае мы тоже выводим все частями, но не перезагружаем страницу, а просто берем новый фрагмент данных на своей стороне.
Этот вариант работает быстрее и отзывчивее, но требует загрузки всех данных сразу. Потому что, если мы сортируем или фильтруем данные/список, мы должны иметь возможность перебрать всю таблицу — совершить это возможно только при полной загрузке. Если же мы применяем серверную пагинацию, то для сортировки и загрузки мы делаем запрос серверу и получаем новый набор уже обработанных данных.
Как происходит реализация серверной пагинации с помощью React и Redux?
На среднестатистическом проекте React используется как библиотека построения пользовательских интерфейсов, а Redux — как менеджер состояний.
Состояние приложения — это глобальное хранилище данных фронтенд-приложения, связанное с интерфейсом. Изменение этих данных приведет к перерендерингу страницы со стороны Реакта.
При заходе на страницу Реакт запрашивает у API начальное отображение данных. То есть первую страницу (в основном, со сброшенными сортировками фильтров). Мы запрашиваем данные и помещаем их в Редакс. Как только в Редаксе меняются данные, связанные в таблице в Реакте, Реакт тут же перерисовывает и отображает эти данные.
В дальнейшем, когда мы на стороне интерфейса запрашиваем новую страницу (при нажатии цифры пагинации или при прокрутке страницы вниз, если реализованы бесконечные списки, как на мобильных телефонах), Реакт дает сигнал Редаксу, что нужно получить свежий снимок. Соответственно, отправляется запрос для следующей страницы, новые данные затирают или дополняют текущие — в зависимости от реализации. После этого данные в Редаксе меняются и уведомляют об этом Реакт, который видит, что они изменились и перерисовывает, дополняет таблицу или создает новую страницу.
При постраничной пагинации, мы нажимаем на вторую страницу, после чего приходят новые данные и затирают предыдущие. Идет направленный поток данных — Реакт видит, что информация меняется и выводит новую. Когда мы идем назад, загружается предыдущие данные и все снова дополняется. Если мы выводим бесконечный список, то строки добавляются к текущим — мы загрузили десять строк, потом еще десять — стало двадцать и так до бесконечности. В этом случае, Реакт, реагируя на изменения данных, сразу дополняет список.
Затратно ли все это для системы?
Если мы используем серверную пагинацию, то речь идет о минимальных затратах на отображение данных. В этом случае мы все доверяем серверу — он полностью выполняет все расчеты и отдает нам результат.
Стоит отметить, что взаимодействие с сервером дает некоторую задержку во времени — если у нас короткий список, мы можем загрузить все и выполнять процессы полностью на нашей стороне.
Разработка web-приложений предусматривает понимание многих сложных процессов. Рядовому пользователю ПК необязательно разбираться в том, как сделать пагинацию React, но знать, что это не помешает.
