What is Nuxt 4's Singleton Data Fetching Layer?

Nuxt 4 introduces a revolutionary caching system where useAsyncData calls with the same key share a single ref across components. This eliminates duplicate API calls, prevents data inconsistencies, and auto-cleans up unused data on unmount. Supports reactive keys via computed refs for automatic refetching.

Code Example:-

Code

// Multiple components share same data
const { data } = await useAsyncData('posts', () => $fetch('/api/posts'))

// Reactive key example
const userId = ref(1)
const { data } = await useAsyncData(() => `user-${userId.value}`, 
  () => $fetch(`/api/users/${userId.value}`)
)