Automatic Link Prefetching vs Manual Prefetching: Trade‑off Between Latency Reduction and Network Usage in React Router
26K reputation · 15 Dec 2020, 05:04 UTC
When users click rapidly between links in a React Router v6 application, loader‑based data fetching can cause cancelled requests and increased latency. One way to mitigate this is to prefetch route data before navigation using the <Link prefetch> prop or the experimental unstable_prefetchData function. However, enabling prefetching automatically for every link may generate unnecessary network traffic, especially on metered connections, while leaving it explicit relies on developers to predict which routes will be needed.
The goal is to determine whether automatic prefetching should be the default behavior for <Link> components in scenarios with high‑frequency concurrent navigation, balancing reduced perceived latency against bandwidth usage.
- Should
<Link prefetch>be enabled by default for all links in an app that experiences rapid concurrent navigation? - What quantitative metrics (e.g., time to first meaningful paint, total request count, data transferred) best capture the latency‑versus‑traffic trade‑off?
- How can a project selectively apply prefetching only to high‑priority routes without manual annotation on every link?