Question 1

Quelle est la différence principale entre useFetch et useAsyncData dans Nuxt ?

Accepted Answer

useFetch est un wrapper autour de useAsyncData et $fetch qui simplifie les appels API courants. Il gère automatiquement la construction de l'URL et accepte directement une URL comme premier argument, tandis que useAsyncData nécessite une clé unique et une fonction fetcher personnalisée. Utiliser useFetch pour les appels API simples, useAsyncData pour des logiques de fetching complexes.

Question 2

Pourquoi est-il recommandé de toujours fournir une clé unique lors de l'utilisation de useAsyncData ?

Accepted Answer

La clé unique permet à Nuxt d'identifier et de dédupliquer les requêtes entre le serveur et le client lors de l'hydratation SSR. Sans clé unique, les données pourraient être re-fetchées inutilement côté client après le rendu serveur, ou des conflits de cache pourraient survenir. La clé sert également pour le caching et la gestion du state.

Question 3

Quelle est la différence entre $fetch et useFetch dans Nuxt ?

Accepted Answer

$fetch est une fonction utilitaire qui effectue des requêtes HTTP simples sans gestion de state ni réactivité, similaire à fetch natif mais avec des améliorations Nuxt. useFetch est un composable qui retourne des refs réactives (data, pending, error) et gère l'hydratation SSR. Utiliser $fetch pour des appels impératifs dans des event handlers, useFetch pour du fetching déclaratif dans les composants.

Data Fetching Nuxt

Quelle est la différence principale entre useFetch et useAsyncData dans Nuxt ?

Réponse

Pourquoi est-il recommandé de toujours fournir une clé unique lors de l'utilisation de useAsyncData ?

Réponse

Quelle est la différence entre $fetch et useFetch dans Nuxt ?

Réponse

Comment activer le lazy fetching avec useFetch ou useAsyncData ?

Comment gérer les erreurs lors du data fetching avec useFetch ?

Autres sujets d'entretien Vue.js / Nuxt.js

Fondamentaux JavaScript

JavaScript moderne (ES6+)

Les bases de Vue

Composants Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Réactivité Vue

Fondamentaux Nuxt

SSR & SSG Nuxt

Server Routes Nuxt

Modules Nuxt

Composables Vue

Formulaires & Validation Vue

Gestion d'état Nuxt

Testing Vue

Déploiement Nuxt & CI/CD

Performance Vue

Patterns avancés Vue

TypeScript avec Vue

Authentification Nuxt

SEO avec Nuxt

Internationalisation Nuxt

Architecture Vue

Sécurité Nuxt

Écosystème Vue

Migration Vue 2→3 & Nuxt 2→3

Maîtrise Vue.js / Nuxt.js pour ton prochain entretien