¿Te has preguntado por qué las aplicaciones más exitosas de 2026 han abandonado casi por completo la paginación tradicional? La respuesta es simple: la retención del usuario cae un 40% cada vez que este debe hacer clic en un botón de ‘Siguiente’.
En un ecosistema donde la velocidad de carga y la fluidez son críticas, implementar un Infinite Scroll eficiente no es un lujo, sino una necesidad técnica. Sin embargo, hacerlo mal puede destruir el rendimiento de tu aplicación y disparar los costos de lectura en tu base de datos.
En esta guía, vamos a desglosar cómo construir un sistema de scroll infinito utilizando el stack más potente de la actualidad: Next.js 15+, Supabase y la librería TanStack Query v5. Prepárate para optimizar tus peticiones y ofrecer una experiencia de usuario de primer nivel.
Arquitectura de Datos: Estrategia de Paginación
Antes de escribir una sola línea de código, debemos decidir cómo vamos a pedir los datos a PostgreSQL a través de Supabase. Existen dos métodos principales, pero en 2026, uno es claramente superior.
Paginación por Offset vs Cursor
La paginación por Offset es la más sencilla, pero tiene un problema grave de escalabilidad: a medida que el usuario avanza, la base de datos debe escanear todas las filas anteriores, lo que aumenta la latencia.
- Offset: Usa `range(from, to)`. Fácil de implementar pero lento en datasets grandes.
- Cursor-based: Usa un puntero (generalmente un `ID` o `created_at`). Es extremadamente rápido y evita duplicados si se insertan datos nuevos mientras el usuario navega.
Configuración de Supabase y Hooks de Datos
Para que nuestro Infinite Scroll funcione, necesitamos una función que solicite «páginas» de datos. Aquí es donde entra en juego la potencia de la sintaxis de Supabase JS SDK.
El Fetcher de Datos
Debemos crear una función asíncrona que reciba un `pageParam`. Este parámetro indicará a Supabase desde qué punto empezar a leer.
- Utilizamos el método `.select()` para traer solo las columnas necesarias.
- Aplicamos `.order(‘id’, { ascending: false })` para ver lo más reciente.
- Usamos `.range()` calculado dinámicamente según el tamaño de página (ej. 10 items).
| Parámetro | Tipo | Función |
|---|---|---|
| pageSize | number | Define cuántos registros traer por petición (recomendado: 10-20). |
| pageParam | number | El índice de inicio para la función range de Supabase. |
Implementación del Observer en el Frontend
El secreto de un scroll infinito fluido no es detectar el final de la página con eventos de scroll (que son pesados para la CPU), sino usar la Intersection Observer API.
Uso de react-intersection-observer
Esta librería nos permite detectar cuándo un elemento específico (un ‘spinner’ al final de la lista) entra en el viewport del usuario.
- Instala la dependencia: `npm install react-intersection-observer`.
- Crea un componente `div` al final de tu lista de elementos.
- Configura el hook `useInView` para disparar la función `fetchNextPage` de TanStack Query.
Optimización de Rendimiento y Cache
En 2026, los usuarios no perdonan un scroll que se traba. Para evitar el «jank» o saltos visuales, debemos implementar Windowing o Virtualización.
Virtualización de Listas
Si tienes 1,000 elementos en el DOM, el navegador sufrirá. Librerías como @tanstack/react-virtual permiten renderizar solo los elementos que son visibles actualmente.
- Reduce el consumo de memoria RAM en dispositivos móviles.
- Mantiene una tasa constante de 60 FPS durante el scroll.
- Mejora el LCP (Largest Contentful Paint) de tu sitio.
Ventajas y Desventajas
✅ Ventajas
- Mejora drástica en el engagement del usuario.
- Elimina la fricción de los clics de paginación.
- Carga progresiva que ahorra ancho de banda inicial.
❌ Desventajas
- Dificulta el acceso al footer de la página.
- Puede complicar el SEO si no se maneja el historial de URLs.
Preguntas Frecuentes
¿Cómo afecta el Infinite Scroll al SEO?
Si se implementa correctamente con la History API de Next.js para cambiar la URL al hacer scroll, Google puede indexar las páginas individuales sin problemas.
¿Es mejor usar Supabase Realtime para esto?
No necesariamente. Realtime es para actualizaciones en vivo. Para scroll infinito, las REST Queries tradicionales son más eficientes en consumo de recursos.
¿Cuántos items debo cargar por vez?
Lo ideal en 2026 son entre 12 y 20 items. Menos causa demasiadas peticiones; más ralentiza la carga inicial en redes 5G inestables.
Conclusión
- Usa Intersection Observer para detectar el final de la lista de forma eficiente.
- Implementa React Query (useInfiniteQuery) para gestionar el estado de carga y cache.
- No olvides la virtualización si esperas listas de más de 100 elementos.
Implementar esta función transformará tu web de un sitio estático a una experiencia fluida y moderna. ¿Has tenido problemas con la duplicación de datos al hacer scroll? ¡Cuéntanos tu experiencia en los comentarios!
