How do you prefetch data for CSR pages in Next.js to reduce perceived latency?

Next.js adapts its prefetching strategy based on route type. For static routes (those that can be fully generated ahead of time), the entire page is prefetched and cached in the browser for 5 minutes by default. For dynamic routes, prefetching is more conservative—if you have a loading.tsx file, Next.js prefetches the layout up to the loading boundary and caches it for 30 seconds, showing the loading UI immediately upon navigation while the rest of the page streams in. Without loading.tsx, dynamic routes skip prefetching entirely to avoid unnecessary server work for routes users may never visit . This design balances performance with resource consumption [citation:6][citation:9].

For routes not automatically prefetched (e.g., links outside the viewport or in footers), you can manually trigger prefetching using the useRouter hook. This is useful for predictive prefetching based on user behavior—for example, prefetching a user's most common destinations after login, or prefetching based on analytics data. The router.prefetch() method accepts a route path and optionally an onInvalidate callback to refresh stale data . You can also create custom prefetching strategies like hover-only prefetching to balance performance and resource usage [citation:6].

Next.js maintains an intelligent prefetching queue to avoid overwhelming the network or browser. The scheduler prefetches in this order: links currently in the viewport first, then links showing user intent (hover or touch), with newer links replacing older ones in the queue . Links that scroll off-screen are discarded from the queue entirely. This ensures that prefetching resources are focused on the most likely next navigations. Additionally, Next.js stores prefetched React Server Component payloads in an in-memory cache keyed by route segments, reusing parent layouts when navigating between sibling routes to reduce network traffic [citation:6].