Nuxt data fetching (useFetch, useAsyncData) in Vue - Performance & Optimization

Performance: Nuxt data fetching (useFetch, useAsyncData)

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered in Nuxt apps.

Fetching data on page load to render content

Vue

import { useAsyncData } from '#app'
export default {
  setup() {
    const { data } = useAsyncData('data', () => $fetch('/api/data'))
    return { data }
  }
}

useAsyncData fetches data server-side during SSR or static generation, delivering ready content to the client and speeding up LCP.

📈 Performance GainReduces LCP by 300-700ms by avoiding client fetch delay; data is ready at render time

Fetching data on page load to render content

Vue

export default {
  async mounted() {
    this.data = await fetch('/api/data').then(res => res.json())
  }
}

Fetching data inside mounted delays rendering until client-side fetch completes, blocking LCP and causing slower initial paint.

📉 Performance CostBlocks rendering until client fetch completes, increasing LCP by 200-500ms depending on network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client fetch in mounted()	Low initial DOM nodes	Multiple reflows on data arrival	High paint cost due to delayed content	[X] Bad
Server fetch with useAsyncData	DOM ready with data	Single reflow during hydration	Low paint cost, fast LCP	[OK] Good
Repeated useFetch calls in watcher	Multiple DOM updates	Multiple reflows	High paint cost, INP delay	[X] Bad
useFetch with refresh()	Single DOM update per refresh	Single reflow	Moderate paint cost, better INP	[!] OK

Rendering Pipeline

Data fetching with useFetch or useAsyncData integrates into the server-side rendering pipeline or client hydration. Server-side fetches prepare data before HTML is sent, reducing client layout and paint delays. Client-side reactive fetches update DOM after hydration, potentially triggering reflows.

→Data Fetching

→HTML Generation

→Hydration

→Layout

→Paint

⚠️ BottleneckHydration and Layout stages when data is fetched client-side causing delayed DOM updates

Core Web Vital Affected

LCP, INP

This concept affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered in Nuxt apps.

Optimization Tips

1Use useAsyncData to fetch data server-side for faster initial render and better LCP.

2Avoid calling useFetch repeatedly; use refresh() to update data reactively.

3Minimize client-side fetches during hydration to reduce reflows and improve INP.

Performance Quiz - 3 Questions

Which Nuxt data fetching method improves Largest Contentful Paint by fetching data server-side?

A useFetch with repeated calls in watcher

B useFetch inside mounted()

C useAsyncData

D fetch inside created() lifecycle hook

DevTools: Performance

How to check: Record page load and interaction in DevTools Performance panel; look for long tasks and layout shifts during data fetches

What to look for: Check LCP timing for server vs client fetch; watch for multiple reflows or long scripting tasks indicating repeated fetches

Practice

1. What is the main difference between useFetch and useAsyncData in Nuxt?

easy

A. useAsyncData automatically refreshes data, useFetch never does.

B. useAsyncData requires a unique key for caching, useFetch does not.

C. useFetch is only for server-side, useAsyncData is client-side only.

D. useFetch caches data with a key, useAsyncData fetches without caching.

Solution

1. Step 1: Understand useFetch behavior

   useFetch fetches data from a URL quickly but does not require a key for caching.

2. Step 2: Understand useAsyncData behavior

   useAsyncData needs a unique key to cache the fetched data, allowing more control over data reuse.

3. Final Answer:

   useAsyncData requires a unique key for caching, useFetch does not. -> Option B

4. Quick Check:

   Key caching difference = D [OK]

Hint: Remember: useAsyncData needs a key, useFetch is simpler [OK]

Common Mistakes:

• Thinking useFetch caches data with keys
• Confusing client/server usage of both
• Assuming useAsyncData auto-refreshes data

2. Which of the following is the correct syntax to use useAsyncData in a Nuxt component?

easy

A. const { data } = useAsyncData('posts', () => $fetch('/api/posts'))

B. const data = useAsyncData('/api/posts')

C. useAsyncData(() => $fetch('posts'), 'posts')

D. const { data } = useAsyncData(() => fetch('/api/posts'))

Solution

1. Step 1: Check the required parameters for useAsyncData

   The first parameter is a unique key string, the second is a function returning a promise.

2. Step 2: Validate each option's syntax

   const { data } = useAsyncData('posts', () => $fetch('/api/posts')) correctly uses a key 'posts' and a fetch function with $fetch. Others miss the key or use wrong order.

3. Final Answer:

   const { data } = useAsyncData('posts', () => $fetch('/api/posts')) -> Option A

4. Quick Check:

   Key first, fetch function second = A [OK]

Hint: Key string first, fetch function second in useAsyncData [OK]

Common Mistakes:

• Omitting the key parameter
• Swapping parameters order
• Using native fetch instead of $fetch

3. Given this code snippet in a Nuxt component:

const { data, pending } = useFetch('/api/user')

return { data, pending }

What will pending be initially when the component loads?

medium

A. undefined

B. false

C. true

D. null

Solution

1. Step 1: Understand useFetch loading state

   pending is a reactive boolean indicating if the fetch is still in progress.

2. Step 2: Initial value of pending

   When the component loads and fetch starts, pending is true until data arrives.

3. Final Answer:

   true -> Option C

4. Quick Check:

   Loading state pending = true [OK]

Hint: pending is true while fetching data [OK]

Common Mistakes:

• Assuming pending is false initially
• Confusing pending with data presence
• Expecting pending to be null or undefined

4. You wrote this code in a Nuxt component:

const { data } = useAsyncData(() => $fetch('/api/items'))

But the data never loads. What is the likely problem?

medium

A. Using $fetch instead of native fetch.

B. Returning data directly instead of inside a function.

C. Not awaiting the useAsyncData call.

D. Missing a unique key as the first argument to useAsyncData.

Solution

1. Step 1: Check useAsyncData parameters

   useAsyncData requires a unique key string as the first argument for caching.

2. Step 2: Identify missing key issue

   Omitting the key causes the fetch not to run properly or cache data, so data never loads.

3. Final Answer:

   Missing a unique key as the first argument to useAsyncData. -> Option D

4. Quick Check:

   Key missing in useAsyncData = B [OK]

Hint: Always provide a key string first in useAsyncData [OK]

Common Mistakes:

• Skipping the key argument
• Confusing $fetch with fetch as cause
• Expecting useAsyncData to be awaited

5. You want to fetch user data and posts in a Nuxt page using useAsyncData. You want posts to refresh every time the user ID changes. Which approach correctly achieves this?

hard

A. Use useAsyncData with a key including the user ID, e.g., useAsyncData(`posts-${userId}`, () => $fetch(`/api/posts?user=${userId}`)).

B. Use useAsyncData with a fixed key 'posts' and rely on automatic refresh.

C. Use useFetch instead of useAsyncData because it auto-refreshes on param change.

D. Call useAsyncData without a key and manually watch userId to refetch.

Solution

1. Step 1: Understand caching with keys in useAsyncData

   Keys uniquely identify cached data. Changing the key triggers a new fetch.

2. Step 2: Use dynamic key with user ID

   Including userId in the key string ensures posts refetch when userId changes.

3. Step 3: Evaluate other options

   Fixed keys won't refresh; useFetch doesn't auto-refresh on param change; manual watch is more complex.

4. Final Answer:

   Use useAsyncData with a key including the user ID, e.g., useAsyncData(`posts-${userId}`, () => $fetch(`/api/posts?user=${userId}`)). -> Option A

5. Quick Check:

   Dynamic key triggers refetch = C [OK]

Hint: Include changing params in key string for refetch [OK]

Common Mistakes:

• Using fixed keys expecting auto-refresh
• Assuming useFetch auto-refreshes on param change
• Skipping key causes no caching or refetch