Ability to disable prefetching for certain links.

[gc]

Summary

The ability to tell a Link component to not pre-fetch.

Basic example

It could possibly be named prefetch instead of noprefetch and just have it set to true by default, either way:

// This will be pre-fetched as normal
<Link to="/somepage1">
    My Page 1
</Link>

// This link will not be pre-fetched
<Link to="/somepage2" noprefetch>
    My Page 2
</Link>

Motivation

To give developers finer control over their links, I personally would like to disable it for some certain links to reduce network requests/bandwidth usage and for debugging purposes.

In a closed issue where a user asks how to do this, a work-around for noprefetch is given and it has some upvotes which shows to some level that people want it: #2384 (comment) - as this comment suggests, an ability to globally disable prefetching would be good too, it being just a prop that you can opt-out of with a falsey value seems to be good for all.

This could also allow full control of when (as opposed to if), in a way like this:

<Link to="/somepage2" noprefetch={!this.state.shouldPrefetch}>
    My Page 2
</Link>

this.state.shouldPrefetch will be false by default, so it wont be prefetched when the page is loaded, however based on some event or logic, e.g. X component has completed Y action, the user has interacted with the page, or depending on the browser/network, and any other logic.

[DSchau]

@gc if you don't want some of the functionality (rather, the core functionality) of gatsby-link, perhaps just use a regular a tag?

That seems to be a much better use case for this functionality, rather than extending gatsby-link in perhaps fringe-y ways. Every additional modification to core components introduces some small measure of complexity that we then have to maintain.

Rather, I would recommend a custom link helper, e.g.

import React from 'react'
import { Link } from 'gatsby'

function MyLink({ children, to, prefetch, ...rest }) {
  if (!prefetch) {
    return <a href={to} {...rest}>{children}</a>
  }
  return <Link to={to} {...rest}>{children}</Link>
}

MyLink.defaultProps = {
  prefetch: true
}

export default MyLink

Going to close this as answered! Thanks for the question!

[gc]

Sounds good. Thanks

[kuworking]

@gc if you don't want some of the functionality (rather, the core functionality) of gatsby-link, perhaps just use a regular a tag?

That seems to be a much better use case for this functionality, rather than extending gatsby-link in perhaps fringe-y ways. Every additional modification to core components introduces some small measure of complexity that we then have to maintain.

Rather, I would recommend a custom link helper, e.g.

import React from 'react'
import { Link } from 'gatsby'

function MyLink({ children, to, prefetch, ...rest }) {
  if (!prefetch) {
    return <a href={to} {...rest}>{children}</a>
  }
  return <Link to={to} {...rest}>{children}</Link>
}

MyLink.defaultProps = {
  prefetch: true
}

export default MyLink

Going to close this as answered! Thanks for the question!

@DSchau but with your suggestion, you lose the beauties of having some persistent data going on through gatsby-browser and gatsby-ssr isn't it?

(related to #23165)

[DSchau]

you lose the beauties of having some persistent data going on through gatsby-browser and gatsby-ssr isn't it?

Sorry -- what do you mean here?

[kuworking]

If you rely on Link, you can have a persistent e.g. header that doesn't get reloaded between page changes

But if you substitute the links for a elements to prevent prefetching, then you lose that persistency (for example with authentication within wrapRootElement, which now will be executed in every page as everything gets reloaded)

[magnusarinell]

Perhaps use reach router link?

[kuworking]

Perhaps use reach router link?

I worried about this while trying to optimize lightspeed scores, and at the end I've concluded that this link elements don't seem to affect the score

Still, I think would be nice to have a gatsby-option to just disable prefetching, or delay it, or anything, but as you say perhaps react link could work (don't know)

[stuckj]

I have a use case for selective disabling preloading. I have a link in a menu that goes to a page that requires basic auth. If you mouse over the link a basic auth prompt pops up as gatsby tries to pre-load it. Seems like a perfect case for being able to turn pre-loading off on a specific link.

For now I'll just make those links a tags though.

[Blumed]

Yeah, I don't think changing your markup to anchors is the right choice since it breaks you out of your SPA. Link lets you stay in your SPA and so an option to stunt prefetching is a great idea. Most of the links in our nav are our bigger pages with lots of content which effects our homepage loads since the data needs to load in for these other pages which is not ideal.

[davidhoneyb]

I also think it would be a good idea to have such a thing!