If a Nuxt interview has one guaranteed question, it is "what is the difference between useFetch, useAsyncData and $fetch". The good answer explains the payload: data fetched on the server is serialised into the HTML and reused during hydration, and only the composables participate in that. Everything else on this page, keys, lazy, getCachedData, headers, is a consequence.

Know

• $fetch is ofetch: a fetch wrapper that parses JSON, throws on error status, retries, and supports interceptors and a baseURL. On the server, calls to your own /api/* routes are dispatched in-process to Nitro (no HTTP round trip). Use it in event handlers, in server code, and inside useAsyncData handlers. Calling it directly in setup runs it on the server and again on the client with nothing in the payload.
• useAsyncData(key, handler, options) runs any async function during SSR, stores the result under key in the payload, and on the client resolves from the payload instead of re-running. useFetch(url, options) is useAsyncData with a $fetch handler and an auto-generated key derived from the URL and options. Reactive URLs (useFetch(() => /api/users/${id.value})) refetch when the source changes.
• Keys must be unique and stable. Two calls with the same key share one entry; a key that changes per render defeats the cache. Nuxt 4 generates useAsyncData keys from the file location when omitted, but explicit keys are the safe habit for anything called in more than one place.
• Returned refs: data (undefined until resolved in Nuxt 4, or default()), status ('idle' | 'pending' | 'success' | 'error'), error, refresh()/execute(), clear(). data is shallow in Nuxt 4 (deep: false): replace it, do not mutate nested properties and expect updates.
• Options that change behaviour: lazy (do not block navigation; render with status), server: false (skip on the server, fetch after hydration), immediate: false (wait for execute()), default, transform, pick, watch (extra reactive sources), dedupe ('cancel' the in-flight request, or 'defer' to reuse it), getCachedData (decide what counts as cached). useLazyFetch/useLazyAsyncData are shorthands for lazy: true.
• getCachedData(key, nuxtApp, ctx) defaults to "the payload entry or static data", which is what makes hydration free. Return your own value to implement TTLs or to reuse across navigations; ctx.cause tells you whether this is the initial call, a refresh, or a watch trigger.
• Headers and cookies do not cross the wire by themselves. During SSR, $fetch to your API does not carry the browser's cookies. useRequestFetch() returns a $fetch that forwards the incoming request's headers; useRequestHeaders(['cookie']) gives you specific ones to pass manually.
• Interceptors (onRequest, onResponse, onRequestError, onResponseError) and $fetch.create({ baseURL, headers, onResponseError }) in a plugin give you a project-wide $api with auth and error mapping.
• Errors do not throw from useFetch; they land in error. Turn a missing resource into a real 404 with throw createError({ status: 404, fatal: true }) after checking error.value.
• Refreshing: refresh() on the returned object, refreshNuxtData(key) from anywhere, clearNuxtData(key) to drop cached entries. After a mutation, refresh the affected keys rather than mutating data by hand.

How it works

The three tools in their right places:

<script setup lang="ts">
const route = useRoute()

// 1. Page data: on the server, into the payload, reused on hydration; refetches when the id changes.
const { data: user, status, error, refresh } = await useFetch(() => `/api/users/${route.params.id}`, {
  key: () => `user:${route.params.id}`,
  pick: ['id', 'name', 'email'],
})
if (error.value?.status === 404) {
  throw createError({ status: 404, statusText: 'User not found', fatal: true })
}

// 2. Non-critical data: do not block navigation, render a skeleton from status.
const { data: activity, status: activityStatus } = useLazyFetch(() => `/api/users/${route.params.id}/activity`, {
  server: false, // personal, uncacheable, only needed after paint
  default: () => [],
})

// 3. Mutations: plain $fetch in an event handler, then refresh what changed.
async function rename(name: string) {
  await $fetch(`/api/users/${route.params.id}`, { method: 'PATCH', body: { name } })
  await refresh()
}
</script>

A project $api with auth and error mapping, provided once:

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const session = useUserSession()

  const api = $fetch.create({
    baseURL: config.public.apiBase,
    // On the server, forward the incoming cookies so the API sees the same user.
    headers: import.meta.server ? useRequestHeaders(['cookie']) : undefined,
    onResponseError({ response }) {
      if (response.status === 401) nuxtApp.runWithContext(() => session.clear())
    },
  })

  return { provide: { api } }
})

// useAsyncData wrapper around the provided $api, so pages keep the payload behaviour.
export function useApi<T>(key: string, url: MaybeRefOrGetter<string>, options: Parameters<typeof useAsyncData<T>>[2] = {}) {
  const { $api } = useNuxtApp()
  return useAsyncData<T>(key, () => $api<T>(toValue(url)), options)
}

A time-based cache across navigations, using getCachedData:

export function useCachedFetch<T>(url: string, ttlMs = 60_000) {
  return useFetch<T>(url, {
    key: `cached:${url}`,
    getCachedData(key, nuxtApp, ctx) {
      if (ctx.cause === 'refresh:manual') return undefined // force a real request
      const cached = nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
      if (!cached) return undefined
      const fetchedAt = (cached as { fetchedAt?: number }).fetchedAt ?? 0
      return Date.now() - fetchedAt < ttlMs ? cached : undefined
    },
    transform: (data: T) => ({ ...(data as object), fetchedAt: Date.now() } as T & { fetchedAt: number }),
  })
}

Exercise

Be able to say