Context

Clase 16 de 21 • Curso de Server Side Rendering con Nuxt 2

Clase anteriorSiguiente clase

Sylvester Josué Rojas Cañón

student•

Recomiendo la escuela de English Academy de Platzi para pronunciar correctamente las palabras en inglés.

Maria Tohabanda Duchi

student•

Router ? :D

Carlos Perilla

student•

Codigo en Nuxt 3:

    const { params } = useRoute()
    const { data: { value: { article } } } = await useAsyncData(() => {
        const { slug } = params
        return $fetch(`http://localhost:9999/.netlify/functions/article?slug=${slug}`);
    })

    console.log(article)

Es más funcional, y con funciones integradas en Nuxt

Fernando Jorge Bardelli

student•

¿Que diferencia habría entre usar AsyncData() y mounted() para cargar los datos de un articulo?

Diana Martinez

student•

Mounted es un hook del ciclo de vida de los componentes de Vue, eso significa que se ejecuta después de que la página ha cargado en el frontend, ha cargado javascript, y luego se ha montado el componente, por lo que si llamas al API desde ahí, primero cargará tu página vacía, y luego tardará un momento en lo que el backend respone los datos y estos se dibujan.

Mientras tanto, asyncData se asegura de iniciar la petición de datos desde antes de responderle al usuario la página, y para cuándo la página es devuelta al usuario, incluso antes de que carge el javascript, ya vienen los datos que consiguió.

Pues en ayncData la petición al API se hace desde el servidor (o al momento de usar el comando generate para sitios estáticos).

En resumen asyncData te permite que no haya carga inicial con datos vacíos y tiempos de espera del lado del cliente mientras se llenan los datos.

Víctor Julián González Estrada

student•

Puedo usar cualquier función del store?, usando asyncData?

Víctor Julián González Estrada

student•

Seria así?

asyncData({store}) {
code
}