Estoy implementando el desplazamiento infinito usando Next.js y Firestore Realtime Database (v9.x).

Cuando el cliente solicita la página de inicio, el servidor obtiene las 4 imágenes más recientes de la base de datos y se las muestra al cliente. Cuando el usuario llega al final de la página, se deben buscar 4 imágenes más y así sucesivamente.

Esta es mi base de datos:

Cada vez que un usuario agrega una nueva imagen, esa imagen se empuja al final de la lista, como una matriz/lista.

Para las primeras 4 imágenes que se obtienen en el lado del servidor y se envían/muestran al cliente, estoy usando este código:

 query(ref(db, 'latest_images'), limitToLast(4))

Este código está destinado a recuperar las últimas cuatro imágenes agregadas (las imágenes más recientes).

Ahora, en el lado del cliente, cuando el usuario llega al final de la página, este es el código que estoy usando para obtener 4 imágenes más:

 query( ref(db, `latest_images`), endBefore(lastImageID), // lastImagedID = "-MqZdzr7RTYpyujV6hnP" (w/ d. quotes) limitToLast(4), )

lastImageID almacena la cuarta clave de entrada de abajo hacia arriba en la imagen de la base de datos que se muestra arriba. Esta variable es un "ancla", por lo que el código sabe dónde comenzar a consultar las 4 imágenes siguientes.

Lo que esperaba del código anterior es que obtendría estas imágenes (delimitadas por las llaves rojas):

Pero terminó obteniendo las mismas 4 imágenes que se obtuvieron inicialmente en el lado del servidor (delimitadas por las llaves azules).

De la documentación:

endBefore() Devuelve elementos menores que la clave o el valor especificados según el método de orden elegido.

limitToLast() Establece el número máximo de elementos que se devolverán desde el final de la lista ordenada de resultados.

https://firebase.google.com/docs/database/web/lists-of-data?authuser=0#filtering_data