Cheksiz aylantirish, paginatsiya yoki «Yana ko‘rsatish»: qaysi biri

Qisqa javob

• Paginatsiya — foydalanuvchi aniq narsani qidirganda: katalog, qidiruv natijalari, arxiv. U qayerda ekanini biladi, osongina qaytadi va havolani ulasha oladi.
• «Yana ko‘rsatish» — katalog va bloglar uchun murosa: sahifaga o‘tmasdan yuklash, lekin qachon yuklashni foydalanuvchi o‘zi hal qiladi va futerga yetib borish mumkin.
• Cheksiz aylantirish — aniq maqsadsiz varaqlanadigan lentalar uchun: ijtimoiy tarmoqlar, to‘plamlar, video.

Ikkilansangiz, «Yana ko‘rsatish» + ?page=N ko‘rinishidagi URL dan boshlang: bu variant navigatsiya va SEO ni eng kam buzadi.

Taqqoslash

SEO: nimalarni hisobga olish kerak

Qidiruv robotlari sahifani aylantirmaydi va tugmalarni bosmaydi. Butun ro‘yxat indekslanishi uchun:

• har bir qismning o‘z URL i bo‘lishi kerak (/catalog?page=2);
• JavaScript bosishni ushlab qolsa ham, sahifada keyingi sahifaga oddiy <a href> havolalari bo‘lishi kerak;
• paginatsiya sahifalarini indeksatsiyadan yopmang va ularda birinchi sahifaga canonical qo‘ymang — har bir sahifa o‘zi uchun kanonik bo‘lishi kerak.

API da kursorli paginatsiya

OFFSET orqali paginatsiya oddiy, lekin katta jadvallarda sekinlashadi, yangi yozuvlar qo‘shilganda esa elementlar takrorlanadi yoki tushib qoladi. Kursor ikkala muammoni ham hal qiladi: mijoz oxirgi olingan elementning o‘rnini yuboradi.

SELECT id, title, created_at
FROM posts
WHERE (created_at, id) < ($1, $2)
ORDER BY created_at DESC, id DESC
LIMIT 20;

API ro‘yxatni va nextCursor ni qaytaradi — oxirgi element qiymatlari satrga kodlangan holda. nextCursor bo‘sh bo‘lsa, boshqa ma’lumot yo‘q. Saralash uchun (created_at, id) bo‘yicha indeks kerak.

Kursor bilan to‘g‘ridan-to‘g‘ri 37-sahifaga sakrab bo‘lmaydi, shuning uchun raqamli klassik paginatsiyada ko‘pincha OFFSET qoldiriladi, kursor esa lenta va «Yana ko‘rsatish» uchun ishlatiladi.

Intersection Observer orqali yuklash

scroll hodisasini tinglamang — Intersection Observer va ro‘yxat oxiridagi ko‘rinmas «datchik» elementdan foydalaning.

const sentinel = document.querySelector("#sentinel");
let cursor = null;
let loading = false;

const io = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting || loading) return;
  loading = true;
  const res = await fetch(`/api/posts?cursor=${encodeURIComponent(cursor ?? "")}`);
  const { items, nextCursor } = await res.json();
  renderItems(items);
  cursor = nextCursor;
  loading = false;
  if (!nextCursor) io.disconnect();
}, { rootMargin: "400px" });

io.observe(sentinel);

rootMargin yuklashni oldindan boshlaydi, toki foydalanuvchi bo‘shliqqa urilmasin. «Yana ko‘rsatish» uchun xuddi shu kod tugma bosilganda chaqiriladi.

Ortga qaytganda o‘rinni saqlash

Eng zerikarli muammo: foydalanuvchi mahsulotni ochdi, «Ortga» ni bosdi — va yana birinchi sahifani ko‘rmoqda. Nima yordam beradi:

• Qismlar yuklanishi bilan history.replaceState orqali URL ni yangilang (?page=3), toki qaytgandan keyin qancha yuklash kerakligini bilsangiz.
• Yuklangan ma’lumotlarni sessionStorage da yoki so‘rovlar keshida (TanStack Query, SWR) keshlang va brauzer aylantirishni tiklashga urinishidan oldin ro‘yxatni tiklang.
• Sahifadan chiqishdan oldin aylantirish o‘rnini saqlang va ro‘yxat chizilgandan keyin uni qaytaring.
• SPA freymvorklarida o‘rnatilgan aylantirishni tiklash qanday ishlashini tekshiring — ma’lumotlar keshda bo‘lsa, ko‘pincha o‘zi uddalaydi.

Uzun ro‘yxatlar unumdorligi

• Bir necha yuz kartochkadan keyin virtualizatsiyani yoqing — DOM da faqat ko‘rinadigan elementlar qoladi.
• Rasmlarga o‘lcham bering va loading="lazy" dan foydalaning.
• Maket sakramasligi uchun yuklanish vaqtida skeletonlarni ko‘rsating.