Frontend Academy · Leçon

useFetch et useAsyncData

Récupérez des données côté serveur avec useFetch et useAsyncData, gérez les états d’attente et d’erreur et comprenez comment Nuxt hydrate le client.

useFetch et useAsyncData est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Récupération de données dans Nuxt 3

Nuxt fournit deux fonctions composables principales pour récupérer des données : useFetch (fondée sur une URL, elle appelle fetch en interne) et useAsyncData (accepte n'importe quelle fonction asynchrone, avec une clé unique pour la mise en cache et la déduplication).

useFetch — La méthode rapide

Transmettez une URL : Nuxt la récupère pendant le SSR, hydrate le client et empêche le client de refaire la récupération lors de l'hydratation.

<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>

Pourquoi aucune double récupération lors de l'hydratation ?

Nuxt sérialise les données récupérées dans la charge utile HTML du SSR. Sur le client, useFetch hydrate les données depuis cette charge utile : aucun second appel réseau. C'est l'optimisation SSR essentielle.

useAsyncData — Asynchrone flexible

Utilisez cette fonction lorsque la récupération ne se résume pas à une simple URL : requêtes de base de données, logique personnalisée ou requêtes en plusieurs étapes.

<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 clé de cache est importante

Le premier argument de useAsyncData est une clé de cache unique. Une même clé partagée entre plusieurs composants déduplique les appels et réutilise le résultat. Des clés différentes produisent des récupérations indépendantes.

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

Actualisation et chargement différé

Les deux fonctions composables renvoient refresh() pour effectuer une nouvelle récupération et acceptent { lazy: true } afin d'éviter de bloquer le SSR, les données étant chargées après le rendu de la page.

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 });

Surveillance et URL réactives

Transmettez une fonction pour l'URL : celle-ci devient réactive. Une nouvelle récupération est effectuée lorsque ses dépendances changent.

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

Options de requête

useFetch accepte les mêmes options que fetch : la méthode, body, les en-têtes, ainsi que des options propres à Nuxt comme la valeur par défaut et la transformation.

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

$fetch — Récupération impérative

$fetch est le récupérateur universel de Nuxt (ofetch en interne). Aucun suivi automatique de l'hydratation n'est effectué. Utilisez-le dans les gestionnaires d'événements et les mutations.

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

Gestion des erreurs

Déclenchez une erreur dans le gestionnaire de récupération pour la faire remonter. Les pages peuvent afficher une page d'erreur personnalisée avec ~/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>

Authentification et cookies

useFetch transmet automatiquement les cookies pendant le SSR. Les requêtes authentifiées fonctionnent donc sur le serveur comme sur le client, sans gestion manuelle des cookies.

useFetch ou useAsyncData — Quand choisir ?

useFetch : requêtes simples fondées sur une URL, dans 95 % des cas. useAsyncData : logique asynchrone personnalisée, composition en plusieurs étapes ou sources sans URL, comme une base de données via server/utils.

Vérification rapide

Pourquoi useFetch dans Nuxt 3 empêche-t-il une requête réseau en double lorsque la page s'hydrate sur le client ?

Récapitulatif : useFetch et useAsyncData

useFetch : basé sur une URL, pour 95 % des cas. useAsyncData : logique asynchrone personnalisée avec une clé de cache unique. Les deux s’hydratent à partir de la charge utile SSR (sans double requête). refresh() pour relancer la récupération, lazy:true pour éviter de bloquer le SSR. Les URL réactives déclenchent une nouvelle récupération. $fetch pour les mutations impératives. error.vue gère les erreurs. Les cookies sont automatiquement transmis pendant le SSR.

Questions Fréquemment Posées

La leçon « useFetch et useAsyncData » est-elle gratuite ?

Oui — le texte complet de « useFetch et useAsyncData » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « useFetch et useAsyncData » ?

Récupérez des données côté serveur avec useFetch et useAsyncData, gérez les états d’attente et d’erreur et comprenez comment Nuxt hydrate le client. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « useFetch et useAsyncData » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Routage fondé sur les fichiers et imports automatiques
useFetch et useAsyncData
Modules Nuxt : images, authentification et i18n
Déploiement : statique ou SSR

← Retour à Frontend Academy