Nuxt Essentials (Part 1): Data Fetching, useAsyncData, useFetch, and SSR

Nuxt's useAsyncData and useFetch handle server-side fetching, deduplication, and hydration so you don't duplicate requests or get hydration mismatches. This post covers how they work, how to choose keys, and how to structure data fetching for SSR and client navigation.

useAsyncData: key and fetcher

useAsyncData(key, fetcher) runs the fetcher (on the server during SSR, and on the client when needed for navigation or refresh). The result is cached by key. The key must be unique per logical request so Nuxt can: