Frontend Academy · leksjon

useFetch og useAsyncData

Hent data fra serveren med useFetch og useAsyncData, håndter ventende og feiltilstander, og forstå hvordan Nuxt hydratiserer klienten.

Leksjon 2 av 414 trinn

useFetch og useAsyncData er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Datahenting i Nuxt 3

Nuxt tilbyr to hovedkomposables for datahenting: useFetch (URL-basert og bruker fetch internt) og useAsyncData (en hvilken som helst asynkron funksjon, med en unik nøkkel for hurtigbufring og deduplisering).

useFetch — den raske måten

Oppgi en URL — Nuxt henter den under SSR, hydrerer på klienten og hindrer klienten i å hente dataene på nytt under hydreringen.

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

Hvorfor hentes ikke data to ganger under hydrering?

Nuxt serialiserer de hentede dataene inn i SSR-nyttelasten i HTML-en. På klienten hydrerer useFetch fra denne nyttelasten — uten et nytt nettverkskall. Dette er den viktigste SSR-optimaliseringen.

useAsyncData — fleksibel asynkronitet

Bruk dette når datahentingen ikke er en enkel URL — for eksempel ved databaseforespørsler, egendefinert logikk eller forespørsler i flere trinn.

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

Hurtigbufringsnøkkelen er viktig

Det første argumentet til useAsyncData er en unik hurtigbufringsnøkkel. Når samme nøkkel deles mellom komponenter, dedupliseres forespørslene og resultatet gjenbrukes. Ulike nøkler gir uavhengige datahentinger.

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

Oppdatering og lazy

Begge composables returnerer refresh() for å hente data på nytt og godtar { lazy: true } for å hoppe over blokkering av SSR (data lastes inn etter at siden er gjengitt).

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

Overvåking og reaktive URL-er

Send inn en funksjon for URL-en — da blir den reaktiv. Data hentes på nytt når avhengighetene endres.

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

Forespørselsalternativer

useFetch godtar de samme alternativene som fetch — method, body og headers, samt Nuxt-spesifikke alternativer som default og transform.

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

$fetch — imperativ datahenting

$fetch er Nuxts universelle datahenter (ofetch internt). Den sporer ikke hydrering automatisk. Bruk den i hendelseshåndterere og mutasjoner.

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

Feilhåndtering

Kast en feil inne i fetch-håndtereren for å gjøre den synlig. Sider kan vise en egendefinert fe inside med ~/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>

Autentisering og cookies

useFetch videresender automatisk cookies under SSR, slik at autentiserte forespørsler fungerer både på serveren og klienten uten manuell cookie-håndtering.

useFetch kontra useAsyncData — når?

useFetch: enkle URL-baserte forespørsler (95 % av tilfellene). useAsyncData: egendefinert asynkron logikk, sammensetning i flere trinn og kilder som ikke er URL-er (database via server/utils).

Kort kontroll

Hvorfor hindrer useFetch i Nuxt 3 en duplisert nettverksforespørsel når siden hydrerer på klienten?

Besvar den i den interaktive leksjonen

Oppsummering: useFetch og useAsyncData

useFetch: URL-basert, standardtilfellet i 95 % av tilfellene. useAsyncData: egendefinert asynkron logikk med en unik hurtigbuffer-nøkkel. Begge hydrerer fra SSR-nyttelasten (ingen dobbeltforespørsel). Bruk refresh() til å hente data på nytt og lazy:true for å unngå blokkering av SSR. Reaktive URL-er utløser nye forespørsler. Bruk $fetch for imperative mutasjoner. error.vue håndterer feil. Informasjonskapsler videresendes automatisk under SSR.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «useFetch og useAsyncData» gratis?

Ja – hele teksten i «useFetch og useAsyncData» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «useFetch og useAsyncData»?

Hent data fra serveren med useFetch og useAsyncData, håndter ventende og feiltilstander, og forstå hvordan Nuxt hydratiserer klienten. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «useFetch og useAsyncData»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy