Comprendre la différence entre Asyncdata Fetch Nuxt

Nuxt fournit deux crochets utiles pour récupérer des données : AsyncData et Fetch. Ils sont disponibles à différents moments du cycle de vie de Nuxt, ce qui affecte la façon dont nous les utilisons. ). ⏰

Pour charger nos données d'application, Nuxt nous fournit deux crochets utiles : AsyncData et Fetch (et ce n'est pas l'API JS Fetch dont nous parlons). La principale différence entre ces deux crochets est qu'ils sont disponibles à différentes étapes du cycle de vie de Nuxt. Ce qui, bien sûr, a ses implications, comme nous le verrons ensemble.

👩🏻‍🏫 Nous commencerons par « localiser » ces deux hooks dans le cycle de vie de Nuxt avant de plonger dans les spécificités de chaque hook et comment les utiliser. Ensuite, nous les comparerons pour voir lequel convient le mieux à chaque cas d'utilisation.

Nuxt Lifecycle

Comme vous pouvez le voir dans le diagramme ci-dessous, fetch devient disponible après que l'instance de composant est créé. D'autre part, asyncData est disponible avant cela.

Fetch

Le hook fetch peut être appelé, comme le montre le schéma ci-dessus :

• Sur le serveur -side, lors du rendu de la route, et
• Du côté client après le montage du composant.

export default {
  data()  {
    retour {
      articles: [],
    };
  },

  async fetch()[19659015]{
    
    this.articles = attendez fetch("https://jsonplaceholder.typicode.com/posts" ).then((res) => res.json() );

    
  },
};

Vous pouvez également appeler fetch sur demande en utilisant this.$fetch() n'importe où dans votre composant (par exemple dans vos observateurs, vos méthodes, etc.).

<template>
  
  <button @click=[19659017]"$fetch">Actualiser</bouton>

  
  <bouton @click="refresh()">Refresh</ bouton>
</modèle>

<script>
  export default {
    méthodes: {
      refresh() {
        this.$fetch() ; 
      },
    },
  };
</script>

Vous pouvez personnaliser vos appels d'API d'extraction à l'aide des options suivantes :

1. fetchOnServer (Booléen / Fonction | par défaut sur true) : lorsque truel'appel d'extraction sera lancé côté serveur plutôt que côté client uniquement.

2. fetchDelay (entier | Par défaut à 200 millisecondes) : cette option définit un délai minimum pour exécuter notre appel de récupération, afin que nous n'ayons pas une sorte de flash rapide lorsque nos données sont chargées dans la page. Je ne pense pas que vous aurez besoin de l'utiliser, car je pense que la valeur par défaut est suffisante pour l'éviter.

3. fetchKey (Chaîne/Fonction | Par défaut, l'ID ou le nom du composant) : si vous devez suivre vos appels d'API, vous pouvez utiliser fetchKey pour vous fournir une clé . Vous pouvez également générer un identifiant unique via une fonction.

export default {
  data() {
    return {
      articles: [],
    };
  },

  async fetch()[19659015]{
    ce.articles = attendez fetch("https://jsonplaceholder.typicode.com/posts" ).puis((res) => res.json() );
  },

  fetchOnServer: false,

  
  
  
  fetchKey() {
    const randomKey = Math.[19659042]aléatoire().toString(36).substring(7 );

    return randomKey;
  },
};

Pour rendre votre application plus performante, vous pouvez mettre en cache plusieurs pages et leurs les données récupérées, en ajoutant la directive keep-alive à votre modèle nuxt. De cette façon, la récupération ne sera déclenchée que lors de la première visite, et le reste du temps, les pages et leurs données seront restituées à partir de la mémoire stockée. Vous pouvez également définir le nombre de pages à mettre en cache à l'aide de keep-alive-props.

<modèle>
  <nuxt keep-alive keep-alive-props="{ max: 10 }">[19659063]</nuxt>
</modèle>

Pour optimiser davantage les performances de votre page et l'expérience utilisateur, vous pouvez utiliser les propriétés de $fetchState :

1. $fetchState.pending est un booléen que vous pouvez utiliser pour définir un espace réservé lorsque sa valeur est vraie (au fait, avez-vous entendu parler des Vue Content Placeholders ? 👌). $fetchState.pending renvoie vrai jusqu'au chargement des données.

2. $fetchState.error vous permettra de détecter les erreurs et ainsi de pouvoir afficher un message d'erreur.

3. $fetchState.timestamp est, comme son nom l'indique, un horodatage de la dernière récupération appelée. Pourquoi auriez-vous besoin de ça ? Eh bien, lorsque vous utilisez keep-alive, vous pouvez combiner $fetchState.timestamp avec le hook activated() pour optimiser la mise en cache de vos données. De cette façon, vous définissez un nombre spécifique de secondes avant de pouvoir à nouveau appeler la récupération.

<modèle>
  <div v-if="$fetchState.pending">Espace réservé</div>
  <div v-if="$fetchState.error">Error Message</ div>
  <div v-else>Données chargées</div>
</modèle>

<script>
  export default {
    data() {
      return {
        articles: [],
      };
    },

    activé() {[19659222]if (this.$fetchState.timestamp <= Date.now([19659017]) - 60000) {
        this.$fetch();
      }[19659025]},

    async fetch() {
      this.articles = attendent fetch ("https://jsonplaceholder.typicode.com/posts").puis((res)[19659045]=> res.json());
    },
  };
</script>

AsyncData

Le hook asyncData est un autre moyen de récupérer des données côté serveur. Il attend que sa promesse soit résolue avant de rendre la page et fusionne directement la valeur de retour dans l'état local (vous savez, la fonction de données que vous utilisez dans chaque composant 😉).

export default {[19659288]async asyncData({ $content, params }) {
    articles = attendez $content("https://jsonplaceholder.typicode.com/posts").puis( (res) => res.json());

    return[19659015]{
      articles,
    };
  },
};

Cela signifie que :

• Il n'y a aucun espace réservé que vous pouvez configurer ;[19659012]Si une erreur se produit, vous serez redirigé vers la page d'erreur au lieu d'afficher un message d'erreur sur la route de la page dans laquelle vous êtes censé atterrir ; et
• Comme nous l'avons mentionné précédemment, vous pouvez récupérer des données à l'aide de asyncData uniquement dans les composants de page.

Vous pouvez contourner cette dernière limitation en : 1️⃣ Récupérer vos données dans le hook monté, mais vous perdez le rendu côté serveur. 2️⃣ Ou en passant les données récupérées via asyncData en tant qu'accessoires aux composants de bloc de pages, mais encore une fois, l'inconvénient cette fois est la lisibilité du code (et donc la maintenabilité) si vous avez d'innombrables appels de données pour chaque composant de bloc.[19659322]Fetch vs. AsyncData : Tableau comparatif

Options	Hook de récupération	AsyncData Hook
Peut être appelé à partir de n'importe quel composant	✅	❌ (uniquement dans les composants de page )
Accès au contexte (this)	✅	❌
Écoute des changements de chaîne de requête	✅	❌
Convient aux composants dynamiques (pieds de page et barres de navigation dynamiques, filtres et trieurs, etc.)	✅	❌
Caching	✅	❌
Utilisation d'un espace réservé[19659327]✅	❌ (peut être remplacé par une barre de chargement lors de la navigation d'une page à l'autre)
Détecte les erreurs	✅[19659327]❌ (ne peut rediriger vers une page d'erreur qu'en cas d'erreur)

Fetch vs. AsyncData : cas d'utilisation pertinents

Comme nous l'avons mentionné précédemment, le crochet d'extraction sera parfaitement adapté pour faire un appel API qui sert une liste d'articles. Mais cette liste devra peut-être être actualisée en ajoutant de nouveaux articles et/ou en chargeant d'autres articles au fur et à mesure que l'utilisateur fait défiler vers le bas.

Dans cet exemple, nous allons récupérer les données et les ajouter au magasin. C'est le cas d'utilisation le plus courant, dans lequel nous utilisons fetch pour récupérer des données et mettre à jour le magasin (ou l'état local du composant).

export default {
  mount[19659017]() {
    fenêtre.oncroll = (e) => {
      if ((fenêtre .innerHeight + window.scrollY) >= document.body.offsetHeight) {
        this.$fetch();
      }
    };[19659027]}

  async fetch() {
    try {
      
      this.articles = attendre  ce.$store.dispatch('Articles/fetchArticles');

      
      ce.articles = attend axios.get('/articles');
    } attrape  (erreur[19659017]) {
      const message = erreur.response.data.message; 

      console.error(error);
    }
  }
}

Je reste généralement avec fetch, mais il y a un cas lorsque je passe au hook AsyncData. C'est lorsque j'ai besoin de récupérer les données d'un fichier de démarques avec le package Nuxt Content. Voici un exemple rapide :

export default {
  async asyncData({ $content, params  }) {
    const article = wait $content("articles", params.slug).fetch();

    retour { article }; 
  },
};

Conclusion

J'espère qu'avec cet article vous pourrez mieux saisir les différences entre Fetch et AsyncData. Je suis également toujours heureux de lire vos commentaires et vos messages Twitter @RifkiNada.

Et si vous êtes curieux de connaître mon travail, vous pouvez le consulter ici NadaRifki.com.