Bir listede infinite scroll'u uçtan uca (API ve UI birlikte) nasıl uygularsınız?

Uçtan uca doğru bir infinite scroll için backend cursor tabanlı sayfalama sunmalı, frontend ise görünürlük tetiklemeli yükleme, yükleniyor/hata/bitti durumları ve büyük listelerde virtualization sağlamalıdır.

Backend

-- created_at + id ile kararlı sıralama (aynı zaman damgası olan kayıtlar için id)
SELECT id, title, created_at FROM posts
WHERE (created_at, id) < ($1, $2)
ORDER BY created_at DESC, id DESC
LIMIT 21;  -- 20 istenir, 1 fazlası "daha var mı" bilgisini verir

Yanıt: { items: [...20], nextCursor: "base64(created_at,id)" }. Son sayfada nextCursor null olur. Cursor opak olmalı; client içini çözmeye çalışmamalı.

Frontend (React + TanStack Query)

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey: ["posts"],
  queryFn: ({ pageParam }) => fetch(`/api/posts?cursor=${pageParam ?? ""}`).then((r) => r.json()),
  initialPageParam: null,
  getNextPageParam: (last) => last.nextCursor,
});

const sentinelRef = useRef(null);
useEffect(() => {
  const io = new IntersectionObserver(([e]) => {
    if (e.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
  });
  if (sentinelRef.current) io.observe(sentinelRef.current);
  return () => io.disconnect();
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);

Gözden kaçan detaylar

• Çift istek: aynı anda iki sayfa isteğini engelleyin (isFetchingNextPage kontrolü).
• Liste değişiyorsa: yeni kayıtlar en üste eklenirse offset sayfalama tekrar eden öğeler üretir; cursor bunu çözer.
• Geri gelme: detay sayfasından dönünce scroll pozisyonu ve yüklenmiş sayfalar korunmalı (query cache + scroll restoration).
• Erişilebilirlik ve SEO: infinite scroll footer'a erişimi engeller; "Daha fazla yükle" butonu veya ?page= URL'li sayfalama SEO için daha iyidir.
• Performans: binlerce öğede DOM şişer; TanStack Virtual ile sadece görünen satırlar render edilmeli.