Optimización de Consumo de API REST en Frontend

¿Cómo optimizar una aplicación web desde el frontend?

La optimización en las aplicaciones web es un aspecto crucial para asegurar una experiencia rápida y fluida para los usuarios. Principalmente, se puede abordar desde dos frentes: el backend, donde se trabaja en la velocidad de las consultas a bases de datos y otras funcionalidades, y el frontend, donde nos enfocaremos en esta guía. Hablaremos específicamente de cómo optimizar el tiempo que se tarda en consumir una API REST y las estrategias a utilizar para mejorar el rendimiento en el frontend.

¿Podemos acelerar las solicitudes HTTP en el frontend?

Lamentablemente, desde el frontend no podemos hacer que las solicitudes HTTP sean más rápidas. Sin embargo, podemos implementar estrategias como el uso de caché y memorización para reducir la cantidad de solicitudes necesarias, aprovechando las respuestas ya obtenidas.

¿Cómo funciona el caché en el navegador?

El caché es una técnica que permite almacenar copias de respuestas HTTP para evitar realizar nuevas solicitudes si no es necesario. El navegador maneja el caché de manera predeterminada para determinar cuánto tiempo debe almacenar la información y cuándo es necesario realizar nuevamente una solicitud. Sin embargo, esto tiene sus desafíos, como saber si la información sigue actualizada o si ha cambiado desde la última vez que se almacenó.

¿Qué es la memorización en JavaScript?

La memorización es una práctica de optimización que nos permite guardar resultados de cálculos o solicitudes en estructuras de datos, como objetos o arrays, para reutilizarlos sin hacer nuevas solicitudes. Por ejemplo, en problemas como calcular la serie de Fibonacci, almacenamos resultados intermedios para no recalcular procesos repetitivos, optimizando el rendimiento de la aplicación.

// Ejemplo básico de memorización para Fibonacci
function fibonacciMemo(n, memo = {}) {
    if (n in memo) return memo[n];
    if (n <= 2) return 1;
    memo[n] = fibonacciMemo(n - 1, memo) + fibonacciMemo(n - 2, memo);
    return memo[n];
}

¿Cuáles son las limitantes del caché y la memorización?

Un problema crítico es mantener la información actualizada. Si los datos cambian en el backend después de la primera solicitud, el frontend podría mostrar información obsoleta. Este riesgo varía dependiendo de la aplicación. Por ejemplo, en un banco donde las transacciones cambian continuamente, mostrar datos desactualizados podría ser desastroso.

Aparte, los datos guardados por memorización en JavaScript solamente duran hasta que la página se refresca o el navegador se cierra. Para almacenarlos más allá, se necesitaría utilizar almacenamiento local como localStorage o sessionStorage.

¿Cuál estrategia es mejor: caché o memorización?

La elección entre caché y memorización depende del tipo de proyecto y de la frecuencia con la que cambian los datos. Aplicaciones donde los datos cambian con poca frecuencia pueden beneficiarse del caché para reducir las solicitudes HTTP. Sin embargo, en aplicaciones donde los cambios son frecuentes, sería mejor evitar estas técnicas a favor de realizar solicitudes actualizadas cada vez.

Te invitamos a pensar en tu proyecto personal, como Platzi Movies con la API de The MovieDB, y reflexionar sobre qué estrategia sería más adecuada. ¿Qué ventajas o desventajas encuentras en cada enfoque? ¡Comparte tu opinión y sigue aprendiendo con nosotros en el próximo módulo!