Fetch API in Vue components - Performance & Optimization

Performance: Fetch API in Vue components

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered in Vue components.

Fetching data inside the component's setup without caching or lazy loading

Vue

import { ref, onMounted } from 'vue';
const cache = {};
export default {
  setup() {
    const data = ref(null);
    onMounted(async () => {
      if (cache['data']) {
        data.value = cache['data'];
      } else {
        const response = await fetch('https://api.example.com/data');
        data.value = await response.json();
        cache['data'] = data.value;
      }
    });
    return { data };
  }
}

Caches data to avoid repeated fetches, reducing network requests and speeding up rendering on repeated visits.

📈 Performance GainReduces network calls and blocks rendering less often, improving LCP and INP.

Fetching data inside the component's setup without caching or lazy loading

Vue

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const data = ref(null);
    onMounted(async () => {
      const response = await fetch('https://api.example.com/data');
      data.value = await response.json();
    });
    return { data };
  }
}

Fetch runs every time the component mounts, causing delays in rendering and blocking UI updates until data arrives.

📉 Performance CostBlocks rendering until fetch completes, increasing LCP and causing slower INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch in onMounted with caching	Minimal reactive updates	Single reflow after data arrives	Single paint update	[OK] Good
Fetch in onMounted without caching	Reactive updates each mount	Reflow per mount	Paint per mount	[!] OK
Fetch in template expressions	Multiple fetch triggers	Multiple reflows per render	Multiple paints	[X] Bad
Synchronous fetch blocking UI	Blocks initial render	Blocks reflow	Blocks paint	[X] Bad

Rendering Pipeline

Fetch API calls in Vue components trigger network requests that delay data availability. Until data arrives, Vue may render placeholders or empty states. Once data is set, Vue updates the DOM causing style recalculation, layout, paint, and composite steps.

→Network

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckNetwork latency and Layout caused by reactive DOM updates after data fetch

Core Web Vital Affected

LCP, INP

This affects page load speed and interaction responsiveness by controlling when and how data is fetched and rendered in Vue components.

Optimization Tips

1Always fetch data asynchronously inside lifecycle hooks like onMounted.

2Cache fetch results to avoid repeated network requests and speed up rendering.

3Never fetch data directly in template expressions to prevent multiple fetch calls and reflows.

Performance Quiz - 3 Questions

What is a performance benefit of caching fetch results in Vue components?

A Increases bundle size significantly

B Triggers more reflows on each render

C Reduces repeated network requests and speeds up rendering

D Blocks rendering until cache is cleared

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record while loading the Vue page, and look for long tasks or network delays during component mount.

What to look for: Look for long blocking times in Main thread and delayed DOM updates indicating slow fetch or blocking code.