Prefetch in High Demand Systems

Prefetch techniques focused not just on assets (as in tipos-de-prefetch), but on heavy data from APIs. Essential for perceived speed in massive data applications.

The High Demand Problem

In complex systems (dashboards, e-commerce, reports, infinite feeds), fetching data only when the user demands it causes constant loading screens. The biggest bottleneck is network latency. Prefetching solves this by anticipating data needs.

Main Strategies

1. Intent-driven Prefetch

Instead of preloading on initialization, react to behavioral hints that the user will request an action soon.

Hover (onMouseEnter): When the mouse passes over a link/button (“View Details”), there is about 200–300ms before the actual click.
Focus (onFocus): For users navigating via keyboard.

// Conceptual example with React Query
function ProductLink({ id }) {
  const queryClient = useQueryClient();

  const prefetchData = () => {
    queryClient.prefetchQuery({
      queryKey: ['product', id],
      queryFn: () => fetchProductDetails(id),
      staleTime: 60000, // Keep data "fresh" for 1 minute
    });
  };

  return (
    <Link href={`/product/${id}`} onMouseEnter={prefetchData}>
      View Product
    </Link>
  );
}

2. Anticipated Pagination and Infinite Scroll

Never wait for the user to reach page 2 to request page 2.

Traditional Pagination: If the user is reading the current page, silently prefetch the “Next” page.
Infinite Scroll: Use Intersection Observer to trigger the request when there are X pixels left to the bottom of the screen, avoiding stutters.

⚠️ Pitfalls of Mass Prefetching

Poorly implemented prefetch becomes a rebound effect:

Accidental DDoS Attack: Prefetching all links in a 100-item list simultaneously will bring down the server.
Bandwidth Waste: On 3G/4G connections, downloading megabytes of JSON that will never be used delays current critical requests and wastes the user’s mobile data.
Memory Leaks / OOM (Out of Memory): Giant browser caches with no expiration policy can crash the tab.

Best Practices (Checklist)

[ ] Only prefetch what is highly likely to be accessed.
[ ] Use mature libraries (React Query, SWR) that handle deduplication and caching automatically.
[ ] Adjust the staleTime correctly to avoid fetching the same data multiple times.