0Pricing
Frontend Academy · Lezione

useFetch e useAsyncData

Recuperare dati dal server con useFetch e useAsyncData, gestire gli stati di attesa e di errore e capire come Nuxt esegue l’hydration del client

useFetch e useAsyncData è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Recupero dei dati in Nuxt 3

Nuxt fornisce due composable principali per recuperare i dati: useFetch (basato su un URL, utilizza fetch internamente) e useAsyncData (accetta qualsiasi funzione asincrona, con una chiave univoca per la memorizzazione nella cache e la deduplicazione).

useFetch — La modalità rapida

Passi un URL: Nuxt lo recupera durante l'SSR, esegue l'hydration sul client e impedisce al client di eseguire nuovamente il fetch durante l'hydration.

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

Perché non si verifica un doppio fetch durante l'hydration?

Nuxt serializza i dati recuperati nel payload dell'HTML generato dall'SSR. Sul client, useFetch esegue l'hydration a partire da quel payload: non viene effettuata una seconda chiamata di rete. Questa è l'ottimizzazione SSR fondamentale.

useAsyncData — Asincronia flessibile

Lo utilizzi quando il recupero dei dati non consiste in un semplice URL: query al database, logica personalizzata o richieste in più passaggi.

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

La chiave della cache è importante

Il primo argomento di useAsyncData è una chiave univoca per la cache. La stessa chiave condivisa tra più componenti elimina i duplicati e riutilizza il risultato. Chiavi diverse producono fetch indipendenti.

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

Aggiornamento e modalità lazy

Entrambi i composable restituiscono refresh() per eseguire nuovamente il fetch e accettano { lazy: true } per evitare di bloccare l'SSR, caricando i dati dopo il rendering della pagina.

const { data, refresh } = await useFetch('/api/posts');

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

// Or lazy mode:
const { data, pending } = useFetch('/api/posts', { lazy: true });

Watch e URL reattivi

Passi una funzione per l'URL: in questo modo è reattivo. Il fetch viene eseguito nuovamente quando cambiano le dipendenze.

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

Opzioni della richiesta

useFetch accetta le stesse opzioni di fetch, tra cui method, body e headers, oltre a opzioni specifiche di Nuxt come default e transform.

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — Fetch imperativo

$fetch è il fetcher universale di Nuxt, basato internamente su ofetch. Non tiene traccia automaticamente dell'hydration. Lo utilizzi nei gestori di eventi e nelle mutazioni.

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

Gestione degli errori

Generi un errore all'interno del gestore di fetch per renderlo disponibile. Le pagine possono mostrare una pagina di errore personalizzata con ~/error.vue.

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

Autenticazione e cookie

useFetch inoltra automaticamente i cookie durante l'SSR, quindi le richieste autenticate funzionano sia sul server sia sul client senza dover gestire manualmente i cookie.

useFetch e useAsyncData — Quando usarli?

useFetch: richieste semplici basate su URL, il caso più comune. useAsyncData: logica asincrona personalizzata, composizione in più passaggi e origini non basate su URL, come un database tramite server/utils.

Verifica rapida

Perché useFetch in Nuxt 3 evita una richiesta di rete duplicata quando la pagina esegue l'hydration sul client?

Riepilogo: useFetch e useAsyncData

useFetch: basato sull'URL, il caso nel 95% dei casi. useAsyncData: logica asincrona personalizzata con una chiave di cache univoca. Entrambi si idratano dal payload SSR (senza effettuare una seconda richiesta). Utilizzi refresh() per ripetere la richiesta e lazy:true per evitare di bloccare l'SSR. Gli URL reattivi attivano una nuova richiesta. Utilizzi $fetch per le mutazioni imperative. error.vue gestisce gli errori. Durante l'SSR i cookie vengono inoltrati automaticamente.

Domande Frequenti

La lezione «useFetch e useAsyncData» è gratuita?

Sì — il testo completo di «useFetch e useAsyncData» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «useFetch e useAsyncData»?

Recuperare dati dal server con useFetch e useAsyncData, gestire gli stati di attesa e di errore e capire come Nuxt esegue l’hydration del client Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «useFetch e useAsyncData»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Routing basato sui file e auto-import
  2. useFetch e useAsyncData
  3. Moduli Nuxt: immagini, autenticazione e i18n
  4. Deployment: statico e SSR
← Torna a Frontend Academy