Пагинация на сайте: offset, cursor, SEO и prefetch

Пагинация на сайте: offset, cursor, SEO и prefetch

Отметим: когда каталог превышает 10 000 товаров или таблица с логами содержит 500 000 строк, без пагинации не обойтись. В нашей практике был проект с 1,5 млн записей в PostgreSQL — COUNT выполнялся 4 секунды даже после индексации. Пользователи теряли позицию при нажатии «Назад», а поисковые боты не индексировали все страницы. Мы реализовали пагинацию для 50+ проектов, от интернет-магазинов до аналитических дашбордов. Особенно критично это для проектов на Laravel и Next.js, где неправильная пагинация приводит к деградации Core Web Vitals и снижению конверсии. В этой статье разберём реализацию пагинации: от выбора алгоритма до SEO-тегов и prefetch.

Выбор типа пагинации для интернет-магазина

Выбор между offset и cursor зависит от задачи. Offset-пагинация проста в реализации: LIMIT 20 OFFSET 40. Но на больших наборах данных COUNT — узкое место. Мы используем приблизительный подсчёт через pg_class.reltuples в PostgreSQL, что ускоряет запрос в 100 раз. Cursor-пагинация быстрее, но не даёт URL для каждой страницы — это проблема для SEO.

Почему prefetch важен для мобильных устройств?

Prefetch позволяет загрузить следующую страницу до клика. На мобильных устройствах с медленным соединением это снижает INP на 40%. Мы используем react-query с staleTime: 30_000 и предзагружаем данные в useEffect. Пример для Next.js:

useEffect(() => {
  if (page < lastPage) {
    queryClient.prefetchQuery({
      queryKey: ['products', page + 1],
      queryFn: () => fetchProducts(page + 1),
      staleTime: 30_000,
    });
  }
}, [page]);

Сравнение производительности: prefetch vs без prefetch

Когда использовать cursor-пагинацию?

Cursor-пагинация подходит для лент в реальном времени (Twitter, лента комментариев) или API с большим объёмом данных, где важен порядок без смещений. Мы используем её в проектах с более чем 100 000 записей при частых вставках. Cursor-пагинация требует уникального сортировочного ключа (например, ID или created_at) и не поддерживает произвольный переход на страницу, но обеспечивает стабильность при добавлении новых записей.

Пошаговое руководство по внедрению пагинации на Next.js

1. Определите API-контракт: выберите offset или cursor. Для offset — возвращайте current_page, last_page, total, per_page.
2. Реализуйте серверную логику: используйте paginate() в Laravel или find().skip().limit() в MongoDB. Кешируйте COUNT через Redis на 5 минут.
3. Разработайте UI-компонент: с эллипсисом, aria-label, адаптивностью.
4. Синхронизируйте с URL: через useSearchParams в Next.js или history.pushState в ванильном JS.
5. Добавьте prefetch: с помощью React Query или useEffect с fetch.
6. Внедрите SEO-теги: <link rel="prev"/> и <link rel="next"/> для Яндекса. Google не использует rel prev/next для ранжирования (Google Search Central), но для Яндекса они важны.
7. Протестируйте: проверьте LCP < 2.5 с, INP < 200 мс.

Серверная часть: offset против cursor-пагинации

Для ускорения COUNT мы используем приблизительный подсчёт через pg_class.reltuples в PostgreSQL или кеширование в Redis на 5 минут. Это снижает время запроса с секунд до миллисекунд.

// Laravel — стандартный paginate()
public function index(Request $request): JsonResponse
{
    $perPage = min($request->integer('per_page', 20), 100);
    $products = Product::where('is_active', true)
        ->orderByDesc('created_at')
        ->paginate($perPage);

    return response()->json([
        'data' => ProductResource::collection($products->items()),
        'current_page' => $products->currentPage(),
        'last_page' => $products->lastPage(),
        'per_page' => $products->perPage(),
        'total' => $products->total(),
        'from' => $products->firstItem(),
        'to' => $products->lastItem(),
    ]);
}

UI-компонент пагинации

Компонент выводит номера страниц с эллипсисом при большом количестве. Кнопки с aria-label для доступности. Active-страница выделяется. Стилизация через Tailwind.

// components/Pagination.tsx
interface PaginationProps {
  currentPage: number
  lastPage: number
  onPageChange: (page: number) => void
}

export function Pagination({ currentPage, lastPage, onPageChange }: PaginationProps) {
  const pages = buildPageRange(currentPage, lastPage)

  return (
    <nav aria-label="Навигация по страницам">
      <ul className="flex items-center gap-1">
        <li>
          <button
            onClick={() => onPageChange(currentPage - 1)}
            disabled={currentPage === 1}
            aria-label="Предыдущая страница"
          >
            ←
          </button>
        </li>
        {pages.map((page, i) =>
          page === '...' ? (
            <li key={`ellipsis-${i}`} aria-hidden="true">…</li>
          ) : (
            <li key={page}>
              <button
                onClick={() => onPageChange(page as number)}
                aria-current={page === currentPage ? 'page' : undefined}
                className={page === currentPage ? 'font-bold' : ''}
              >
                {page}
              </button>
            </li>
          )
        )}
        <li>
          <button
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage === lastPage}
            aria-label="Следующая страница"
          >
            →
          </button>
        </li>
      </ul>
    </nav>
  )
}

function buildPageRange(current: number, last: number): (number | '...')[] {
  if (last <= 7) return Array.from({ length: last }, (_, i) => i + 1)

  const delta = 2
  const range: (number | '...')[] = []
  const left = current - delta
  const right = current + delta
  let prev: number | null = null

  for (let i = 1; i <= last; i++) {
    if (i === 1 || i === last || (i >= left && i <= right)) {
      if (prev !== null && i - prev > 1) range.push('...')
      range.push(i)
      prev = i
    }
  }

  return range
}

Синхронизация с URL

Номер страницы должен жить в URL — иначе пользователь теряет позицию при обновлении и не может поделиться ссылкой. Используем useSearchParams в Next.js App Router.

// Next.js App Router
'use client'
import { useRouter, useSearchParams, usePathname } from 'next/navigation'

function usePageParam() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()

  const page = Number(searchParams.get('page') ?? '1')

  const setPage = (newPage: number) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set('page', String(newPage))
    router.push(`${pathname}?${params.toString()}`, { scroll: true })
  }

  return [page, setPage] as const
}

Что входит в нашу работу по пагинации

• Аудит текущей схемы пагинации (SQL-запросы, время ответа)
• Проектирование API-контракта (offset/cursor, формат ответа)
• Реализация серверной логики с кешированием COUNT
• Разработка UI-компонента с адаптивностью и доступностью
• Синхронизация с URL (Next.js, React Router, Vanilla)
• Настройка prefetch для мгновенных переходов
• Внедрение SEO-тегов (rel prev/next, canonical, sitemap для пагинации)
• Документация и обучение команды заказчика

Сроки и стоимость

Базовый компонент с API-интеграцией — от 1 дня. Полный пакет с URL-синхронизацией, prefetch, SEO-тегами, адаптивным дизайном и обучением — от 2 до 4 дней. Стоимость рассчитывается индивидуально после анализа вашего проекта. Экономия времени разработки на готовых компонентах составляет до 30% по сравнению с написанием с нуля.

Свяжитесь с нами — оценим ваш проект. Наши инженеры с многолетним опытом помогут реализовать пагинацию с учётом SEO и производительности. Гарантируем LCP < 2.5 с и корректную индексацию в Яндексе. Закажите реализацию пагинации с гарантией Core Web Vitals. Получите консультацию инженера и прототип за 1 день.