Contenido dinámico tarda en cargar


#1

Hola!

Estoy haciendo un proyecto personal con VueJS, y me pasa, que al cargar contenido que viene de la base de datos, al cargar la página, me tarda cómo 1 segundo en cargar toda la información (Mientras que el resto de la webapp, se carga desde el principio).

No sé si es por un tema de los hooks de lifecycle, lo he probado con created(), beforeCreate(), y beforeMount().

Alguna idea?

Os dejo algunas screens para ilustrar un poco más el problema.


Muchas gracias por la ayuda


#2

1 segundo para un request http que extrae información de una base de datos parece un tiempo razonable. Por qué consideras que es mucho tiempo?

Que tiempo consideras correcto para lo que estás haciendo?


#3

Es correcto? Me gustaría que fuera automático del todo (que cargará todo directamente), pero tampoco se si es posible.

Mi duda también estaba un poco enfocada en si se puede hacer que no tarde, y si la carga de los datos estaría en el hook correcto, en este caso lo puse en el beforeCreate().

Muchas gracias por la ayuda!!


#4

No creo que sea posible ya que siempre existirá una demora mientras se realiza el http request al servidor. Más aún si incluye leer información de una BD, pero como te dije antes 1 segundo parece un tiempo razonable. Podrías mejorar la experiencia de usuario agregando un mensaje de “Cargando” o un gif de un gato :slight_smile:

El “hook correcto” depende de cómo necesites los datos y hay muchas cosas a considerar, te comparto algunas que he notado según mi experiencia:

  1. Si lo que buscas es que se ejecute lo más pronto posible, elegiste bien beforeCreate es la mejor opción.

  2. Si necesitas por alguna razón leer/modificar tu data beforeCreate ya no te sirve porque en ese momento Vue aún no lo tiene disponible. created sería lo mejor.

  3. Si necesitas hacer algún procesamiento en created o beforeCreate y en base al resultado hacer un request asíncrono lo mejor sería beforeMount o mounted ya que tanto created como beforeCreate son hooks asincronos. Puedes comprobarlo en tu código con algo así:


beforeCreate() {
  this.$http.get('url')
     .then(() => {
           console.log('Before Create Hook');
           return response.json();
      })
},
created() {
// Este log siempre irá primero, o en la mayoría de casos.
           console.log('Create Hook');
}

  1. Si quieres acceder al objeto $refs deberías usar mounted ya que en ese ciclo de vida ya está disponible la información del template.

Espero te ayude, saludos.


#5

genial!!!

Muchas gracias, la duda era un poco por eso, gracias por la ayuda, muy amable!

Saludos