vibecheck0.3.0
Performanceduplicate-requestswarning

Duplicate network requests in Vue

When several components each fetch the same endpoint, you pay for the same data multiple times — wasted bandwidth, extra server load, slower time-to-content, and the risk that responses arrive out of order and overwrite each other. It is endemic in AI-built frontends because each component is generated in isolation, so each one fetches what it needs independently instead of sharing.

Framework fixes
GeneralReactNext.jsVueSvelteVanilla JS

Symptoms

  • The Network panel shows the same URL requested several times in a burst
  • A list and its header both fetch the same resource on mount
  • Occasional flicker or stale data from responses racing each other
  • Server logs show duplicate reads for one page view

How VibeCheck catches it

In your widget · Problems

warningduplicate-requestsDuplicate GET request

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "duplicate-requests", issue: "Duplicate GET request", threshold: "The same method + URL requested 2 or more times within 2 seconds" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • Multiple components fetching the same endpoint independently on mount
  • No request deduplication or client-side cache in front of the data layer
  • An effect re-running on every render because its dependencies aren’t stable
  • Rapid-fire calls from search/autocomplete without debouncing

The fix for Vue

Use @tanstack/vue-query for the same key-based dedup, or hoist the fetch into a Pinia store so components read shared state instead of refetching.

vue
<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
const { data } = useQuery({ queryKey: ['user', props.id], queryFn: () => fetchUser(props.id) })
</script>

Vue docs →

Steps

  1. Adopt a query cache (or a shared in-flight promise map) that dedupes by key
  2. Give the same resource the same query key everywhere it’s used
  3. Debounce search/autocomplete and cache responses on the server

See the general, framework-agnostic fix →

FAQ

Is fetching the same URL twice always a bug?
Not always — polling or intentional revalidation is fine. VibeCheck flags the same method+URL hitting 2+ times within 2 seconds, which almost always means two components fetched independently rather than sharing.
Does HTTP caching solve this?
Cache-Control helps the browser reuse responses, but the requests are still made and can still race. Client-side dedup (a query cache or shared promise) prevents the duplicate calls in the first place.
Why do my duplicates come in bursts on mount?
Because several components mount together and each kicks off its own fetch. Sharing one query key (or lifting the fetch to a parent/loader) collapses them into a single request.