Intermediate React Prefetch

[00:00:00]
>> Speaker 1: Can you prefetch after a page load?
>> Brian Holt: Yeah.
>> Speaker 1: If you hover over that button maybe that's when you start loading it?
>> Brian Holt: I'm not going to say you couldn't do that. That particular pattern you mentioned there, that would be possible, it would be a bit more difficult.

[00:00:19] So let me suggest some other alternatives that would be easier than perhaps that. So as always, I end up on an Addy Osmani article, typical. This is what I want, rel, okay. So using your generated output from your parcel bundle, you can come in here and say rel="preload" or "prefetch' or something like that.

[00:00:46] And then src= to whatever the bundle path is.
>> Brian Holt: Like this, and what the browser will do is if it has enough signal, and it has enough time, and bandwidth, and battery, and all this kind of extraneous stuff. It'll actually go out and preload that for you, it's called hinting.

[00:01:18] Now, I'm gonna say it. It's pretty hit and miss, and actually on purpose. If you have low battery and bad signal, it's just going to ignore these, which is what you would want it to do, right? You don't wanna burn people's battery. But if it has like full battery, or you're on desktop on gigabit fiber, it's gonna go prefetch all these things so they'll be super, super fast.

[00:01:37] Last time I checked, Safari on iOS just ignores all of these all the time. So it's, again, hit and miss, and there's several of these, there's prefetch, there's preconnect. You should go check that out, there's several ways to do that. So this is the easiest one, right?
>> Brian Holt: The second one was, which is what I was talking about, is you'd use a service worker in the background.

[00:02:02] And the service worker would just go out and prefetch all these bundles for you. And because it's a service worker, because you write service workers in JavaScript, you have total granular control of how that works.
>> Brian Holt: So that's how we do that.