Frontend Academy · Lektion

useFetch und useAsyncData

Rufen Sie serverseitige Daten mit useFetch und useAsyncData ab, behandeln Sie Lade- und Fehlerzustände und verstehen Sie, wie Nuxt den Client hydratisiert.

useFetch und useAsyncData ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Datenabruf in Nuxt 3

Nuxt stellt zwei wichtige Composables für den Datenabruf bereit: useFetch ist URL-basiert und ruft intern fetch auf, während useAsyncData jede asynchrone Funktion mit einem eindeutigen Schlüssel für Caching und Deduplizierung verwenden kann.

useFetch – der schnelle Weg

Übergeben Sie eine URL. Nuxt ruft sie während des SSR ab, übernimmt die Daten auf dem Client bei der Hydration und verhindert, dass der Client sie während der Hydration erneut abruft.

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

Warum gibt es beim Hydratisieren keinen doppelten Abruf?

Nuxt serialisiert die abgerufenen Daten in die SSR-HTML-Payload. Auf dem Client übernimmt useFetch die Daten aus dieser Payload. Dadurch ist kein zweiter Netzwerkaufruf erforderlich. Das ist die zentrale SSR-Optimierung.

useAsyncData – flexible Asynchronität

Verwenden Sie useAsyncData, wenn der Datenabruf nicht nur aus einer einfachen URL besteht, etwa für Datenbankabfragen, eigene Logik oder mehrstufige Anfragen.

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

Der Cache-Schlüssel ist wichtig

Das erste Argument von useAsyncData ist ein eindeutiger Cache-Schlüssel. Derselbe Schlüssel wird von mehreren Komponenten gemeinsam verwendet, dedupliziert die Anfragen und verwendet das Ergebnis wieder. Unterschiedliche Schlüssel führen zu unabhängigen Abrufen.

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

Aktualisieren und verzögertes Laden

Beide Composables liefern refresh() zum erneuten Abrufen und akzeptieren { lazy: true }, um blockierendes SSR zu überspringen. Die Daten werden geladen, nachdem die Seite gerendert wurde.

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

Beobachten und reaktive URLs

Übergeben Sie eine Funktion für die URL. Dadurch wird sie reaktiv und bei Änderungen ihrer Abhängigkeiten wird der Abruf erneut ausgeführt.

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

Anfrageoptionen

useFetch akzeptiert dieselben Optionen wie fetch – method, body und headers – sowie Nuxt-spezifische Optionen wie default und transform.

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

$fetch – imperativer Datenabruf

$fetch ist Nuxts universeller Datenabruf (intern wird ofetch verwendet). Es gibt keine automatische Hydration-Verfolgung. Verwenden Sie es in Event-Handlern und für Mutationen.

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

Fehlerbehandlung

Werfen Sie innerhalb des Fetch-Handlers einen Fehler, damit er nach außen weitergegeben wird. Seiten können mit ~/error.vue eine eigene Fehlerseite anzeigen.

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

Authentifizierung und Cookies

useFetch leitet Cookies während des SSR automatisch weiter. Dadurch funktionieren authentifizierte Anfragen sowohl auf dem Server als auch auf dem Client, ohne dass Cookies manuell verarbeitet werden müssen.

useFetch vs. useAsyncData – wann?

useFetch: einfache URL-basierte Anfragen, der häufigste Fall. useAsyncData: eigene asynchrone Logik, mehrstufige Verarbeitung und Quellen ohne URL, etwa eine Datenbank über server/utils.

Schnelltest

Warum verhindert useFetch in Nuxt 3 einen doppelten Netzwerkaufruf, wenn die Seite auf dem Client hydratisiert wird?

Zusammenfassung: useFetch und useAsyncData

useFetch: URL-basiert, für 95 % der Fälle. useAsyncData: individuelle asynchrone Logik mit einem eindeutigen Cache-Schlüssel. Beide hydratisieren aus der SSR-Payload (keine doppelte Anfrage). Mit refresh() wird erneut abgerufen, mit lazy:true wird das blockierende SSR übersprungen. Reaktive URLs lösen ein erneutes Abrufen aus. $fetch für imperative Mutationen. error.vue behandelt Fehler. Cookies werden während des SSR automatisch weitergeleitet.

Häufig gestellte Fragen

Ist die Lektion „useFetch und useAsyncData“ kostenlos?

Ja — der vollständige Text von „useFetch und useAsyncData“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „useFetch und useAsyncData“?

Rufen Sie serverseitige Daten mit useFetch und useAsyncData ab, behandeln Sie Lade- und Fehlerzustände und verstehen Sie, wie Nuxt den Client hydratisiert. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „useFetch und useAsyncData“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Dateibasiertes Routing und automatische Imports
useFetch und useAsyncData
Nuxt-Module: Image, Auth und i18n
Deployment: Statisch vs. SSR

← Zurück zu Frontend Academy