Пагинация: что это и зачем нужна
Определение:
Пагинация (от лат. *pagina* — «страница») — это механизм разделения большого объёма данных на отдельные страницы для удобства отображения и навигации.
Определение
**Пагинация** (от лат. *pagina* — «страница») — это механизм разделения большого объёма данных (статей, товаров, записей) на отдельные **страницы** для удобства отображения и навигации.
Проще говоря: вместо того чтобы показывать 1000 товаров на одной странице, сайт разбивает их на части по 20–50 элементов и добавляет навигацию:
«1 2 3 ... 10 →»
Зачем нужна пагинация?
Для пользователей
| Преимущество | Описание |
|---|---|
| 🚀 Быстрая загрузка | Меньше данных = быстрее отрисовка страницы |
| 🎯 Удобная навигация | Легче найти нужный элемент, перемещаясь по страницам |
| 📱 Адаптивность | На мобильных устройствах проще листать порциями |
| 🧭 Ориентация | Пользователь видит, где находится («стр. 3 из 15») |
Для разработчиков и бизнеса
| Преимущество | Описание |
|---|---|
| 💾 Экономия ресурсов | Сервер отдаёт только нужную порцию данных, а не всю базу |
| 📊 Аналитика | Можно отслеживать, как глубоко пользователи просматривают контент |
| 🔍 SEO-оптимизация | Поисковики лучше индексируют структурированные страницы |
| 🛡️ Защита от перегрузок | Снижает риск падения сайта при большом трафике |
Типы пагинации
1. Классическая (номерная)
«1 2 3 4 5 ... 10 › »- Пользователь видит номера страниц и может перейти на любую
- Подходит для каталогов, архивов, форумов
2. Кнопки «Назад / Вперёд»
«‹ Пред. | След. ›»- Простая навигация, когда неважно, на какой именно странице вы находитесь
- Часто используется в блогах, новостных лентах
3. Бесконечная прокрутка (Infinite Scroll)
- Новые элементы подгружаются автоматически при прокрутке вниз
- Популярно в соцсетях (ВК, Instagram, TikTok)
- ⚠️ Минусы: сложно вернуться к конкретному месту, проблемы с SEO
4. «Загрузить ещё» (Load More)
- Кнопка в конце списка, при нажатии подгружается следующая порция
- Компромисс между пагинацией и бесконечным скроллом
Техническая реализация (пример)
Запрос к серверу
GET /api/products?page=3&limit=20SQL-запрос (пример для PostgreSQL/MySQL)
SELECT * FROM products
ORDER BY id
LIMIT 20 OFFSET 40; -- страница 3: (3-1)*20 = 40Пример HTML-навигации
<nav class="pagination">
<a href="?page=1">1</a>
<a href="?page=2">2</a>
<span class="current">3</span>
<a href="?page=4">4</a>
<a href="?page=5">5</a>
<a href="?page=4">→</a>
</nav>Лучшие практики
| Рекомендация | Почему это важно |
|---|---|
| 📏 Оптимальный размер страницы | 20–50 элементов: не слишком мало (много кликов), не слишком много (долгая загрузка) |
| 🔗 ЧПУ-адреса | /catalog/page/3/ вместо ?page=3 — лучше для SEO и запоминаемости |
| ♿ Доступность | Добавьте ARIA-метки и поддержку клавиатуры для пользователей с ограниченными возможностями |
| 📱 Адаптивный дизайн | На мобильных пагинация должна быть удобной для нажатия пальцем |
| 🧭 Текущая страница | Всегда визуально выделяйте номер текущей страницы |
| 🔁 Сохранение фильтров | При переходе между страницами должны сохраняться выбранные фильтры и сортировка |
Пагинация в популярных фреймворках
| Технология | Пример реализации |
|---|---|
| Django | Paginator(objects, 20) + page_obj в шаблоне |
| Laravel | Model::paginate(15) — автоматически создаёт ссылки |
| React | Библиотеки: react-paginate, usePagination хуки |
| Vue | Компоненты в Vue Pagination, Vuetify v-pagination |
| WordPress | Функции paginate_links(), the_posts_pagination() |
Совет: При выборе типа пагинации ориентируйтесь на задачу:
- 🛒 Интернет-магазин → классическая пагинация (пользователь хочет контролировать просмотр)
- 📱 Лента соцсети → бесконечный скролл (вовлечение и непрерывность)
- 📰 Блог/новости → «Загрузить ещё» или простые кнопки «Вперёд/Назад»