Nuxt's useFetch and useAsyncData composables are already powerful, but they got some seriously handy options that can level up how you handle data in your app.

Here are a few advanced options that make a real difference in performance, UX, and network efficiency:

1. dedupe: Avoid Duplicate Requests

Nuxt by default cancels any request with the same key before starting a new one. This means if you have multiple components that fetch the same data, you’ll see unnecessary requests and a lot of canceled ones. With the option dedupe: 'defer’ if an identical request is already pending, Nuxt won’t refetch and waits for the current one to finish.

      const { data } = await useFetch('/api/products', {
    dedupe: 'defer'        // default value: cancel
});

    

2. retry and retryDelay: Resilience for Unstable Endpoints

Not all users have stable connection or fast Wi-Fi. For flaky APIs, edge functions, or when you want to add basic fault tolerance without custom logic, you can use Nuxt’s retry mechanism.

      const { data } = await useAsyncData('user', () => $fetch('/api/user'), {
    retry: 3,            // number of retries after first request fails
    retryDelay: 1000     // milliseconds delay between retries
});

    

3. delay: Stagger Fetches for Smoother UX

This option adds a delay before making the request. You can use it to debounce fetches triggered by user input (though better handled via watch + debounce). It’s useful when you want to avoid flashing loading states for super quick page transitions.

      const { data } = await useFetch('/api/settings', {
    delay: 300     // milliseconds before starting fetch
});

    

Pro tip:

Always provide a key if you're using immediate: false, lazy, or working with reactive URLs to ensure deduplication and caching behave predictably.

These options let you finely tune your app's data layer for performance, UX, and network behavior. Mastering them in useFetch and useAsyncData helps you write cleaner, more efficient, and more resilient Nuxt apps.