Infinite Scroll laedt automatisch neue Inhalte wenn der Nutzer nach unten scrollt. Keine Seiten-Buttons, keine Unterbrechung. Mit der Intersection Observer API und React Query ist das in 20 Minuten gebaut.
Pro-Tip — Der schnelle Weg
Nutze useInfiniteQuery von TanStack Query. Es managed Pages, Loading States und Caching automatisch. Du musst nur die Fetch-Funktion schreiben.
Seite 1
1
TanStack Query einrichten
Installiere TanStack Query fuer Data Fetching mit eingebautem Infinite Scroll Support.
npm install @tanstack/react-query
2
API mit Pagination
Deine API muss cursor-basierte oder offset-basierte Pagination unterstuetzen. Gib immer die naechste Seite oder einen Cursor zurueck.
// API Route: /api/posts?cursor=abc123&limit=20 export async function GET(req) { const cursor = req.nextUrl.searchParams.get('cursor') const posts = await db.post.findMany({ take: 21, // 1 extra to check if more exist cursor: cursor ? { id: cursor } : undefined }) return Response.json({ items: posts.slice(0, 20), nextCursor: posts.length > 20 ? posts[20].id : null }) }
3
useInfiniteQuery Hook
Der Hook managed alle Pages automatisch. getNextPageParam sagt ihm wie er die naechste Seite laden soll.
Platziere ein unsichtbares Element am Ende der Liste. Wenn es sichtbar wird, lade die naechste Seite.
const loadMoreRef = useRef(null)
useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && hasNextPage) fetchNextPage() }) if (loadMoreRef.current) observer.observe(loadMoreRef.current) return () => observer.disconnect() }, [hasNextPage, fetchNextPage])
// Am Ende der Liste: <div ref={loadMoreRef} /> {isFetchingNextPage && <Spinner />}
5
Performance optimieren
Fuer tausende Items nutze Virtualisierung mit TanStack Virtual. Es rendert nur sichtbare Elemente und spart Speicher und Rechenleistung.
npm install @tanstack/react-virtual
Seite 2
Warum das funktioniert
Infinite Scroll erhoehlt die Verweildauer um durchschnittlich 40 Prozent
Intersection Observer ist performanter als Scroll-Event Listener
TanStack Query cached geladene Seiten automatisch
Virtualisierung haelt die Performance auch bei zehntausend Items stabil
Tipps
Zeige am Ende immer einen Loading Indicator damit der Nutzer weiss dass mehr kommt
Cursor-basierte Pagination ist stabiler als Offset bei sich aendernden Daten
Virtualisierung ist Pflicht bei mehr als 500 Elementen
Gib dem Nutzer trotzdem die Option zu paginieren statt nur zu scrollen
Seite 3
Bereit für den nächsten Schritt?
KIWorld VibeCoding Masterclass
Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.