GET requests in components in Vue - Performance & Optimization

Performance: GET requests in 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 on component mount to display content

Vue

<script setup>
import { ref } from 'vue';
const data = ref(null);
// Fetch data outside component or use server-side fetching
fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(json => data.value = json);
</script>
<template>
  <div v-if="data">{{ data }}</div>
  <div v-else>Loading...</div>
</template>

Starts fetching earlier and renders loading state immediately, improving perceived load speed and reducing blocking.

📈 Performance GainReduces blocking render time by 100-300ms and improves LCP and INP.

Fetching data on component mount to display content

Vue

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

Fetching data inside onMounted starts the fetch after initial render and mount, delaying contentful updates and causing slower Largest Contentful Paint (LCP).

📉 Performance CostInitial render shows empty content; LCP delayed until fetch completes post-mount, increasing LCP by 200-500ms depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch in onMounted (after initial render)	Minimal DOM nodes initially	Triggers 1 reflow after data arrives	Paint delayed until data ready	[X] Bad
Fetch outside component with loading state	More DOM nodes for loading UI	Single reflow when data replaces loading	Paint happens immediately with loading	[OK] Good

Rendering Pipeline

GET requests in components delay update Style Calculation and Layout stages after initial render because DOM updates depend on fetched data. Initial paint occurs quickly but LCP waits for meaningful content.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution waiting for fetch response delays Layout and Paint for contentful updates.

Core Web Vital Affected

LCP

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

Optimization Tips

1Avoid blocking rendering by fetching data asynchronously before or outside component mount.

2Use loading placeholders to keep UI responsive during data fetch.

3Minimize reflows by updating DOM only after data is ready.

Performance Quiz - 3 Questions

What is a main performance drawback of fetching data inside the onMounted hook in Vue components?

A It causes excessive CSS recalculations.

B It increases the bundle size significantly.

C It starts data fetching after initial render and increases Largest Contentful Paint (LCP).

D It prevents JavaScript from executing.

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long tasks during JavaScript execution and delayed paint events.

What to look for: Check the Timing section for long scripting times and delayed Largest Contentful Paint (LCP) markers.