How do you implement infinite scrolling or pagination purely on the client side in Next.js?

Implementing infinite scrolling purely on the client side in Next.js involves creating a client component that manages pagination state, fetches data when the user scrolls to the bottom, and appends new items to the existing list. This approach works well for pages where SEO for the paginated content isn't critical or when the data is user-specific. The key pieces are a 'use client' component, state for tracking pages and items, a function to fetch more data, and an intersection observer to detect when the user reaches the end of the list .

The most straightforward implementation uses React hooks (useState, useEffect) to manage pagination state and trigger data fetching. You'll maintain state for the list of items, the current page or offset, and whether there's more data to load. An intersection observer ref attached to a sentinel element at the bottom of the list detects when the user scrolls near the end and triggers the next page fetch .

A more convenient approach is to use the react-intersection-observer library, which provides a custom hook useInView that simplifies intersection detection. This eliminates the need to manually create and manage IntersectionObserver instances .

For applications that need caching and automatic revalidation, SWR provides the useSWRInfinite hook. This hook handles pagination state, caching, and request deduplication automatically. It's particularly useful when the same paginated data might be accessed from multiple components or when you need background revalidation .

React Query (TanStack Query) offers useInfiniteQuery, which provides even more features like query cancellation, background refetching, and devtools. It's the most feature-rich option for complex applications .

When implementing infinite scroll, always provide visual feedback during loading, handle empty states gracefully, and ensure proper cleanup of observers. Use skeleton loaders instead of simple text indicators for better UX. Consider adding a retry mechanism for failed requests and always check for the end of data to prevent unnecessary API calls . For SEO-critical content, combine this client-side approach with server-side initial data fetching so search engines see the first page of content .