Límite de páginas en infinite scroll con APIs

Curso de API REST con Javascript: Performance y Usabilidad

Contenido del curso

No sé dónde empezar

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

20
Cierre y próximos pasos con tu portafolio
08:08 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:54

Límite de páginas en infinite scroll con APIs

Curso de API REST con Javascript: Performance y Usabilidad

Clase 12 de 20

Clase 12 / 20

Recursos

Implementar infinite scrolling sin un límite puede romper tu aplicación o lanzar errores cuando la API se queda sin resultados. Aquí aprenderás a usar la propiedad total_pages de TheMovieDB para detener la carga automática justo cuando llegas al tope, evitando peticiones innecesarias y mejorando la experiencia del usuario.

Por qué necesitas limitar el infinite scroll en tu API

Cuando consumes una API paginada como TheMovieDB, cada respuesta incluye datos sobre los resultados disponibles. Si ignoras ese límite, tu aplicación seguirá pidiendo páginas que no existen y terminarás con errores poco amigables para el usuario.

En el caso de las tendencias, la API devuelve 20.000 resultados distribuidos en 1.000 páginas con 20 resultados cada una [03:10]. Difícilmente alguien hará scroll hasta la página 1000, pero en una página de búsqueda, donde quizá existan solo 100 o 500 películas de Vengadores o robots, el usuario sí puede alcanzar el tope en pocos minutos.

¿Qué es total_pages en TheMovieDB? Es una propiedad que devuelve la API e indica cuántas páginas de resultados existen para tu consulta. La encuentras en data.total_pages cuando usas Axios.

Cómo capturar maxPage desde la primera carga

La lógica empieza en la función inicial, no en la función paginada. ¿Por qué? Porque puede haber consultas sin paginación, y necesitas conocer el límite desde el primer fetch.

Dentro de getTrendingMovies, justo después de asignar las películas con movies = data.results, imprime el dato para confirmar:

javascript console.log(data.total_pages);

Esto te muestra desde la primera carga cuántas páginas tienes disponibles. En el caso de tendencias, verás 1000 en consola apenas recargues la página.

Cómo declarar la variable maxPage globalmente

Para que el dato esté disponible en todas las funciones, declara maxPage en el mismo nivel donde declaras page, pero sin asignarle valor inicial [05:30]:

javascript let page = 1; let maxPage;

Luego, dentro de getTrendingMovies, asigna el valor cuando llegue la respuesta:

javascript maxPage = data.total_pages;

Así, esa variable queda accesible desde cualquier función paginada de tu aplicación, incluyendo getPaginatedTrendingMovies.

Cómo construir la validación isNotMax para detener el scroll

Dentro de la función paginada ya tenías una validación que comprueba si el scroll llegó al final del contenedor. Ahora necesitas una segunda validación que pregunte si todavía puedes pedir más páginas.

La idea es comparar la página actual contra el máximo permitido. Una forma clara de leerlo es preguntando si la página actual es menor que el total disponible:

javascript const pageIsNotMax = page < maxPage;

Este nombre, pageIsNotMax, comunica intención: queremos avanzar solo si la página actual no ha alcanzado el tope.

¿Cómo evito que mi infinite scroll lance errores al final de la API? Combina dos condiciones antes de pedir la siguiente página: que el scroll haya tocado el fondo del contenedor y que page < maxPage. Si ambas se cumplen, incrementa page y haz la consulta.

Cómo combinar ambas condiciones en el scroll

La función paginada queda con una validación doble: el scroll debe estar al final y la página no puede ser la última. Solo cuando ambas se cumplen, sumas uno a page, llamas a la API, y renderizas las nuevas películas en el contenedor.

Al recargar la aplicación verás que el infinite scroll sigue funcionando en las páginas 1, 2, 3, 4, 5 y así sucesivamente, pero se detendrá automáticamente cuando llegue a 1000 sin lanzar errores ni hacer peticiones inútiles.

Por qué replicar este patrón en otras rutas no es tan directo

El siguiente paso lógico es aplicar la misma técnica a getMoviesByCategory y getMoviesBySearch, creando sus versiones paginadas. Pero hay un obstáculo importante.

Estas funciones reciben parámetros entre paréntesis: una categoría, un término de búsqueda. Eso complica asignarlas como callback a un evento de scroll, porque el listener no sabe cómo pasarles esos argumentos en cada ejecución.

La solución pasa por usar closures, una técnica de JavaScript que permite crear funciones que recuerdan el contexto y los argumentos con los que fueron creadas. Es la forma elegante de mantener referencias a parámetros sin perder la capacidad de ejecutar la función paginada de manera dinámica.

Antes de avanzar, intenta resolver el problema por tu cuenta. Crea las versiones paginadas de búsqueda y categoría, pruébalas, observa por qué fallan al recibir argumentos, y comparte en los comentarios qué solución probaste. ¿Lograste hacerlo funcionar o te topaste con el muro de los parámetros?

Lautaro Strappazzon

Hace 4 años

Para implementar el infine scrolling en todas las secciones, lo que hice fue lo siguiente:

Crear (en main.js) una función llamada getPaginatedMovies que reciba todos los posibles parámetros y realice la lógica de chequear los condicionales y hacer el llamado a la API de la siguiente página de resultados:

async function getPaginatedMovies(
    endPoint, 
    {
        categoryId, 
        query
    } = {},
    ) {
    const { 
        scrollTop, 
        scrollHeight, 
        clientHeight 
    } = document.documentElement;

    const scrollAtBottom = (scrollTop + clientHeight) >= (scrollHeight - 15);
    const pageIsNotMax = page < maxPage;

    if (scrollAtBottom && pageIsNotMax) {
        page++;

        const { data } = await api(endPoint, {
            params: {
                page,
                with_genres: categoryId,
                query,
            },
        });
        const movies = data.results;

        printMoviePosters(movies, genericSection, true);
    } 
}

(en main.js) Creé una función específica de paginación para cada sección, en las que que llamaba a la función global de paginación, y si era necesario volvía a sacar la info del hash para pasarla por parámetro:

function getPaginatedTrendingMovies() {
    getPaginatedMovies('/trending/movie/day');
}

function getPaginatedMoviesByCategory() {
    const [_, categoryData] = location.hash.split('=');
    const [categoryId] = categoryData.split('-');
    getPaginatedMovies('/discover/movie', {categoryId});
}

function getPaginatedMoviesBySearch() {
    const [_, undecodedQuery] = location.hash.split('=');
    const query = decodeURI(undecodedQuery);
    getPaginatedMovies('/search/movie', {undefined, query});
}

(en navigation.js) La función de cada página asigna ahora a infiniteScroll su función propia de paginación:

function searchPage () {
   // función recortada
    infiniteScroll = getPaginatedMoviesBySearch;
}

function categoriesPage () {
   // función recortada
    infiniteScroll = getPaginatedMoviesByCategory;
}

function trendsPage () {
   // función recortada
    infiniteScroll = getPaginatedTrendingMovies;
}

Luego me dí cuenta que si navegaba entre diferentes secciones, al compartir función ++page++ mantenía acumulado el último número en el que quedaba, por lo que si llegaba a la página 4 en trendings, al cargar una categoría y scrollear, no me cargaba la página 2 sino la 5, y así sucesivamente. Por lo tanto, (en navigation.js) reasigné a 1 la varible page antes de asignarle la función a infiniteScroll:

    page = 1;
    infiniteScroll = getPaginatedTrendingMovies;

++De esta forma logré que las 3 secciones tengan infinite scrolling, intentando mantenerme DRY++

*Cualquier error o correción, siempre súper bienvenido!

Lautaro Strappazzon

Hace 4 años

Además, agregué un mensaje cada vez que se queda sin resultados el scroll:

Para hacer esto, creé (en index.html) una nueva sección debajo de genericList, inactiva por defecto:

<section id="max-page" class="inactive">
    <h3>
      We're sorry but there's no more matches for your search 😕
    </h3>
  </section>

En nodes.js definí la variable:

const maxPageReached = $('#max-page');

En la función global de paginación agregué un else if que chequeara que se llegó al final del scroll y que no hay más páginas de resultados:

async function getPaginatedMovies(
    endPoint, 
    {
        categoryId, 
        query
    } = {},
    ) {
// función recortada
    } else if (scrollAtBottom && !pageIsNotMax) {
        maxPageReached.classList.remove('inactive');
	// removemos el inactive y de esta forma se muestra el mensaje
    };
}

Finalmente, en navigation.js, a la función de cada página volví a ponerle inactive a la magPageReached para que no aparezca en caso de que se active en algún momento y se mantenga en las otras secciones, como en el siguiente ejemplo:

Agregué algunos estilos para que se vea más o menos decente (sé que se puede mejorar):

#max-page h3 {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

Alguien encontró una mejor forma de hacerlo?

Alejandro Forero Vanegas

Hace 4 años

Genial! Me ayudó tu código para reparar un bug que tenía hace más de una semana. ¡Gracias!

Qué se debe optimizar en el frontend (y qué no)

Optimización y despliegue de Platzi Movies

Caché vs memoization en APIs REST

Caché del navegador vs memoization en APIs

Optimización de imágenes

Spinners vs Skeletons en pantallas de carga

Loading skeletons con CSS y keyframes

Lazy loading con IntersectionObserver

Implementación de Lazy Loading con Intersection Observer

Fallback de imágenes con evento error en JS

Paginación

Paginación vs Scroll Infinito en tu App

Paginación con botón antes del infinite scroll

Infinite Scroll sin botón en JS vanilla

Límite de páginas en infinite scroll con APIs

Closures para infinite scroll en múltiples rutas

Almacenamiento local

Almacenamiento Local con Local Storage en JavaScript

Botón de like sobre pósters con CSS y JS

Guardar películas favoritas con localStorage

Gestión de Películas Favoritas con Local Storage en JavaScript

Bonus

Selección de idioma con navigator.language

Despliegue Seguro de Aplicaciones Web y Protección de API Keys

Próximos pasos

Cierre y próximos pasos con tu portafolio

Límite de páginas en infinite scroll con APIs

Progreso del curso

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

Recursos

Recursos