Obtención de datos: useFetch y useAsyncData
useFetch(), useAsyncData(), obtención en el servidor frente al cliente, refresh() y estado pendiente
Obtención de datos: useFetch y useAsyncData es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Obtención de datos en Nuxt
Nuxt proporciona composables de obtención de datos compatibles con SSR. Se ejecutan en el servidor durante el renderizado y transfieren los resultados al cliente, evitando una solicitud duplicada y el parpadeo de contenido vacío.
Aspectos básicos de useFetch
useFetch envuelve una solicitud a una URL. Devuelve valores reactivos data, pending y error que puede usar directamente en la plantilla.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Mostrar estados de carga y errores
Use pending para indicar un estado de carga y error para los fallos. data contiene el JSON analizado.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData para lógica personalizada
Cuando necesite algo más que una URL sencilla —combinar llamadas o transformar resultados— use useAsyncData. Requiere una clave única y una función fetcher.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Por qué es importante la clave
La clave elimina solicitudes duplicadas y almacena la solicitud en la caché. Dos componentes que usan la misma clave comparten un resultado y una llamada de red, lo que evita realizar fetches redundantes.
useFetch es azúcar sintáctico
Internamente, useFetch(url) es esencialmente useAsyncData con una clave generada automáticamente y un fetcher $fetch(url). Use useFetch para URL sencillas y useAsyncData para fetchers personalizados.
Solo en el cliente con server:false
Establezca server: false para omitir el fetch durante SSR y ejecutarlo solo en el cliente; resulta útil para datos específicos del usuario que no deberían bloquear el renderizado del servidor.
const { data } = await useFetch('/api/me', {
server: false
})Fetches diferidos y no bloqueantes
De forma predeterminada, await bloquea la navegación hasta que llegan los datos. La opción lazy (o useLazyFetch) permite que la página se renderice de inmediato y complete los datos cuando estos estén disponibles.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Volver a hacer fetch con refresh
Los composables devuelven una función refresh para volver a ejecutar el fetch bajo demanda, después de una mutación o de hacer clic en un botón.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Parámetros de consulta reactivos
Pase un query o unas opciones reactivas; cuando cambie un ref observado, el fetch se vuelve a ejecutar automáticamente. Vincule watch para volver a hacer fetch cuando cambien las dependencias.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Transformar la respuesta
La opción transform modifica la forma de la respuesta antes de que llegue a data; resulta útil para seleccionar solo los campos que necesita y reducir el payload enviado al cliente.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Comprobación rápida
Compruebe sus conocimientos sobre la obtención de datos en Nuxt.
Resumen
Ha aprendido a obtener datos en Nuxt:
- useFetch devuelve datos reactivos, pending y error.
- useAsyncData recibe una clave y un fetcher para implementar lógica personalizada.
- server:false se ejecuta solo en el cliente; lazy hace que el fetch no sea bloqueante.
- refresh() vuelve a hacer el fetch; watch se vuelve a ejecutar cuando cambia una dependencia.
Preguntas frecuentes
¿La lección «Obtención de datos: useFetch y useAsyncData» es gratis?
Sí — el texto completo de «Obtención de datos: useFetch y useAsyncData» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Obtención de datos: useFetch y useAsyncData»?
useFetch(), useAsyncData(), obtención en el servidor frente al cliente, refresh() y estado pendiente Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Obtención de datos: useFetch y useAsyncData»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3
- Obtención de datos: useFetch y useAsyncData
- Rutas de servidor y endpoints de API en Nuxt
- Modo SSR frente a SSG y SPA