Facebook/Twitter benzeri sonsuz kaydırmalı (infinite scroll) bir haber akışını nasıl tasarlarsınız?

Ana parçalar: cursor tabanlı pagination, sayfanın sonunu izleyen bir IntersectionObserver, uzun listeler için virtualization ve normalize edilmiş bir client store.

API

Offset yerine cursor kullanırım; akışa yeni gönderiler eklendikçe offset kayar ve tekrar/eksik gönderi olur.

GET /api/feed?cursor=abc123&limit=20
-> { items: [...], nextCursor: "def456" }

Veri modeli

• Gönderiler id ile normalize edilir: posts: Record<id, Post>, users: Record<id, User>, akış ise feedIds: string[].
• Böylece bir kullanıcı adını güncellemek tüm gönderilerde tek yerden yansır.

Yükleme

• Listenin sonuna görünmez bir sentinel eleman konur, görünür olduğunda bir sonraki sayfa çekilir (bir sayfa önceden, rootMargin: "800px" ile).
• TanStack Query useInfiniteQuery bu deseni hazır sunar.

Performans

• Binlerce gönderide DOM şişer: virtualization (TanStack Virtual) ile sadece görünen öğeler render edilir; değişken yükseklikleri ölçmek gerekir.
• Görseller loading="lazy", sabit width/height veya aspect-ratio ile (CLS önlenir).
• Like gibi etkileşimlerde optimistic update, hata olursa geri al.

Diğer konular

• Yeni gönderiler: polling/SSE ile "12 yeni gönderi" bandı göster, kullanıcının okuduğu yeri aniden kaydırma.
• Scroll restoration: detaydan geri dönünce aynı pozisyon.
• Erişilebilirlik: role="feed", öğelerde role="article", yüklenirken aria-busy="true"; klavye kullanıcıları için "daha fazla yükle" butonu alternatifi.