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