Optimización del Consumo de Datos en Aplicaciones Web

Los datos en las aplicaciones web son clave para la experiencia del usuario. Optimizar su consumo no solo mejora la velocidad, sino también protege los recursos del servidor. Exploraremos cómo consumir datos de forma secuencial, paralela y con preload, aplicándolo a un caso práctico con Next.js y marcadores de usuarios.

¿Qué implica el consumo secuencial de datos?

• Se realiza una solicitud tras otra, esperando la respuesta antes de continuar.
• Por ejemplo, en un sistema de marcadores:
  1. Se obtiene el autor a través de su username.
  2. Luego, se buscan los marcadores relacionados usando el ID del autor.
• Aunque funcional, este enfoque puede ser lento, especialmente con grandes volúmenes de datos o servidores distribuidos globalmente.

Desventaja principal: incrementa el tiempo de espera del usuario, degradando la experiencia.

¿Cómo funciona el consumo paralelo con Promise.all?

• Permite ejecutar múltiples solicitudes simultáneamente.

• En lugar de esperar la respuesta del autor para buscar sus marcadores, ambas solicitudes se resuelven a la vez.

• Ejemplo:

  const [author, bookmarks] = await Promise.all([
    getAuthorByUsername(username),
    getBookmarksByAuthorUsername(username),
  ]);

• Ventajas:

  • Acelera la carga de datos.
  • Ideal para optimizar recursos cuando el backend soporta funciones asincrónicas adecuadas.

Sin embargo, no siempre es viable modificar el backend para implementar esta solución.

¿Qué aporta el enfoque de preload?

• Permite anticipar la carga de datos antes de que se necesiten.

• Utilizando APIs como void en Next.js:

  void preloadBookmarksByAuthorId(authorId);

• Este método carga los marcadores antes de procesar otras lógicas de negocio, reduciendo significativamente los tiempos de espera.

• Funciona mejor con fetch de Next.js y su sistema de caché, ofreciendo cargas más rápidas y consistentes.

¿Cuándo usar cada enfoque?

1. Secuencial: Úselo solo si no hay otra opción o si los datos son dependientes entre sí.
2. Paralelo: Ideal cuando las solicitudes no tienen dependencia directa.
3. Preload: Útil para mejorar el rendimiento percibido al anticipar recursos críticos.