Nextjs prefetching and Vercel high Fast Data Transfer

Help
1

Hello Vercel Community

I wanna know if enabling Nextjs Link Prefetching in true will make my Fast Data Transfer cost to skyrocket?

Because we’re having high cost of Fast Data Transfer usage in our proyect. The only thing i can think is that we prefetch almost every link. If we remove some prefetched or implement prefetch by hover can we reduce this cost?

Can this be the reason? Or we should look other kind of optimizations?

2

Yes, Link prefetching can potentially contribute to higher Fast Data Transfer costs on Vercel, especially if you have many links on your pages. By default, Next.js prefetches links when they enter the viewport . This means:

  • When a <Link> component becomes visible, Next.js automatically prefetches the linked route and its data
  • This happens in the background to improve performance for client-side navigation
  • Prefetching is only enabled in production environments

Each prefetched link triggers additional network requests, which count toward your Fast Data Transfer usage. If your pages contain many links that enter the viewport (through scrolling or initial load), this can significantly increase data transfer. You have several options to reduce prefetching-related costs:

Disable automatic prefetching: Set prefetch={false} on your <Link> components :

<Link href="/dashboard" prefetch={false}>
  Dashboard
</Link>

This will still prefetch on hover but not automatically when in viewport.

Selective prefetching: Only enable prefetching for critical navigation paths.
Lazy loading: Implement lazy loading for content that contains many links.
Route chunking: Ensure your routes are properly code-split to minimize the size of prefetched content.

While prefetching might be contributing to costs, also consider:

  1. Image optimization: Ensure you’re using Next.js Image component properly
  2. Static generation: Use static generation where possible to reduce data transfer on each request
  3. Caching strategies: Implement proper caching headers
  4. API response size: Minimize the size of API responses
  5. Third-party scripts: Reduce or optimize third-party scripts
1 Like
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.