Іноді дивишся на програмістські слова і так хочеться, щоб хтось узяв, та пояснив усе простою людською мовою. Ми вирішили взятися за це завдання і зробили оглядову статтю, яка допоможе дізнатися все найнеобхідніше про пагінацію. Технічну частину забезпечив Дмитро — JS developer в Artjoker.
Що таке пагінація?
Пагінація служить для оптимізації перегляду даних, об'ємних списків і таблиць. З її допомогою React-розробник ділить великий набір даних на маленькі шматочки — сторінки, і по черзі їх показує.
Це необхідно для оптимізації швидкості завантаження і щоб вписати дані в розмір сторінки. Останнє — необхідно, щоб користувачеві було легше охопити блок інформації.
Пагінація ділиться на посторінкову і нескінченний список.
У першому випадку ми показуємо одну сторінку за раз — щоб перейти далі необхідно скористатися посторінковою навігацією — кнопками з номерами сторінок або «Попередня»/«Наступна». Наприклад, як у Google-пошуку.
Приклад другого випадку — Lazy Load. Метод пропонує всі веселощі світу — немає необхідності перегортати що-небудь, адже список сам доповнює наявні дані, довантажуючи нові блоки шматочками. Це відбувається, коли користувач проскрольовує до кінця. Так влаштовано багато продуктів для смартфонів або та ж стрічка в Instagram.
Розробка web-додатків не обходиться без лінивого завантаження, адже воно дає змогу швидко показати користувачеві якісь дані на екрані та заповнити простір, а решту — додавати в міру необхідності.
Реакт застосовується для великих списків, що зберігаються на стороні сервера. Використання для локальних не завжди має сенс, адже всі дані вже є.
Локальне зберігання необхідне, щоб система могла швидко отримати дані й обробити весь масив. Якщо йдеться про довгі списки, це не вигідно, оскільки дані завантажуються дуже довго, а користувач, імовірно, не буде переглядати їх усі. Вигідно завантажувати тільки ті елементи, які відвідувач дивиться зараз.
Також пагінація ділиться на серверну і фронтову.
Чим відрізняється server side і frontend side пагінація?
Серверна пагінація на React використовується для роботи з великими обсягами даних. Наприклад, є тисяча рядків таблиці — немає сенсу завантажувати їх усі на фронтенд, адже користувач не перегляне більшість із них — це занадто великий обсяг даних. Крім цього, завантаження і відображення важкого блоку інформації займає занадто багато часу. У такому разі використовують серверну пагінацію. Це означає, що ми завантажуємо таблицю частинами і посторінково відображаємо інформацію. У якийсь момент користувач запитує наступну частину і тільки тоді ми починаємо її завантажувати.
Фронтова пагінація на React JS проводиться, в основному, коли у нас небагато даних і ми можемо їх завантажити та зберігати на своєму боці або всі вони перебувають у сховищі на стороні фронтенда. У такому разі ми теж виводимо все частинами, але не перезавантажуємо сторінку, а просто беремо новий фрагмент даних на своєму боці.
Цей варіант працює швидше і чуйніше, але вимагає завантаження всіх даних відразу. Тому що, якщо ми сортуємо або фільтруємо дані/список, ми повинні мати можливість перебрати всю таблицю — зробити це можливо тільки при повному завантаженні. Якщо ж ми застосовуємо серверну пагінацію, то для сортування і завантаження ми робимо запит серверу і отримуємо новий набір вже оброблених даних.
Як відбувається реалізація серверної пагінації за допомогою React і Redux?
На середньостатистичному проєкті React використовується як бібліотека побудови користувацьких інтерфейсів, а Redux — як менеджер станів.
Стан додатку — це глобальне сховище даних фронтенд-додатку, пов'язане з інтерфейсом. Зміна цих даних призведе до перерендерингу сторінки з боку Реакта.
При заході на сторінку Реакт запитує в API початкове відображення даних. Тобто першу сторінку (в основному, зі скинутими сортуваннями фільтрів). Ми запитуємо дані і поміщаємо їх у Редакс. Щойно в Редаксі змінюються дані, пов'язані в таблиці в Реакті, Реакт одразу ж перемальовує і відображає ці дані.
Надалі, коли ми на стороні інтерфейсу запитуємо нову сторінку (під час натискання цифри пагінації або під час прокручування сторінки вниз, якщо реалізовано нескінченні списки, як на мобільних телефонах), Реакт дає сигнал Редаксу, що потрібно отримати свіжий знімок. Відповідно, відправляється запит для наступної сторінки, нові дані затирають або доповнюють поточні — залежно від реалізації. Після цього дані в Редаксі змінюються і повідомляють про це Реакт, який бачить, що вони змінилися і перемальовує, доповнює таблицю або створює нову сторінку.
У разі посторінкової пагінації, ми натискаємо на другу сторінку, після чого приходять нові дані і затирають попередні. Йде спрямований потік даних — Реакт бачить, що інформація змінюється і виводить нову. Коли ми йдемо назад, завантажуються попередні дані і все знову доповнюється. Якщо ми виводимо нескінченний список, то рядки додаються до поточних — ми завантажили десять рядків, потім ще десять — стало двадцять і так до нескінченності. У цьому випадку, Реакт, реагуючи на зміни даних, відразу доповнює список.
Чи затратно все це для системи?
Якщо ми використовуємо серверну пагінацію, то йдеться про мінімальні витрати на відображення даних. У цьому випадку ми все довіряємо серверу — він повністю виконує всі розрахунки і віддає нам результат.
Варто зазначити, що взаємодія з сервером дає деяку затримку в часі — якщо у нас короткий список, ми можемо завантажити все і виконувати процеси повністю на нашому боці.
Розробка web-додатків передбачає розуміння багатьох складних процесів. Рядовому користувачеві ПК необов'язково розбиратися в тому, як зробити пагінацію React, але знати, що це не завадить.
