Prefetching

[00:00:00]
>> Then let's talk about the prefetching. So, if I go to the post route, I've got a list of posts here. If I go to slow 3G and click on this, there are a couple of things that are loading, the favicon, that doesn't matter. That's not gonna be cached, whatever.

[00:00:18]
I'm talking about the data for this post, as well as the code for rendering the post. Remember, we code split on every route. And so, the code for this particular route, even though there's not much of it, we are still going to load it. Now, cool thing is that because Remix knows all of the data, it knows which route is going to be active just by looking at the URL.

[00:00:41]
So, that means as soon as we navigate there, Remix is, like I'm gonna need this data and I'm gonna need this code, and it just goes and gets it. That's pretty great. So, we don't have to wait for the code to load and then render it, and then that's gonna go load our data.

[00:00:53]
We don't have that waterfall, that stairstep waterfall, we have a straight down waterfall. That said, it would be really cool if because Remix knows exactly what I'm looking for when I click on it, it actually knows where those links are gonna go. And so, if I just say, hey, Remix, I want you to load all this stuff for this URL, then we can have it actually all prefetched and in the cache.

[00:01:21]
And so that's what we're going to do for a couple of things. So we'll go to our index that lists all of our posts. And on these links, we're going to add prefetch="intent". There are a couple options here, you can also do render or none. none is the default behavior, it's like not having this at all.

[00:01:43]
render is when this is rendered, I want you to prefetch it. But not a whole lot of use cases for that, but there are some. You don't wanna load your entire application upfront, right? So, maybe sort of just use that for stuff you're like, I am 99% confident as soon as they're done with this, they're gonna want to go over there.

[00:02:01]
So that's a use case for that. Intent is if the user started to tap on it on their mobile device, or they've hovered over it, they focused on it, whatever, then we're going to prefetch. And that's all that you need to do for prefetching for this URL. I don't know of another framework that allows you to do it that easily.

[00:02:26]
So, now we come over here, so I hover over it and it's prefetching, so by the time I click on it, it's instant. And that, my friends, is use the platform cuz this was in the prefetch cache. Tada, hooray! Pretty cool, nice and fast. It's definitely a low effort, high return or high reward thing that you can do for links the users are commonly use clicking on.

[00:02:58]
So we can do the same thing for our create thing and for this link. The other thing, we're not gonna talk about this today, but if you look at the root.tsx of any of these, we have an export called links. This is for style sheets, you could link image, or do a preconnect, or fonts, or whatever in here.

[00:03:21]
So Remix will actually prefetch these too. So you can have it prefetch your images if you want to. I think the Chrome web team suggests you don't prefetch images for some reason, I don't know why. But yeah, we can prefetch whatever you want to that's in your links export for that route, too.

[00:03:44]
Makes your app feel pretty dang fast, if you ask me. And that is prefetching. This is why we bring in JavaScript. If it weren't for a number of things, I guess, then the regular full refresh every page is like, yeah, that's fine, whatever, it works, the browser can do it.

[00:04:05]
But if we have JavaScript, then might as well use it to make an excellent user experience. Animations, transitions, stuff like that.
>> Does Remix do server side streaming out-of-the-box or-
>> Yeah, yeah, Remix does server side streaming. Now, keep in mind, not all of the popular hosts will support streaming.

[00:04:31]
So, anything built on AWS Lambda, no streaming. What they do, you can do streaming, but what it does is it will buffer everything and then it will send it, which is a real crying shame. So anything built on that, but Deno, so Netlify builds their thing on AWS, but their edge functions are pretty, that's built on Deno, that'll stream.

[00:04:54]
Vercel, also built on AWS, but they have their middleware thing that runs on CloudFlare workers, that will stream. And then, of course, Node can stream. And this project is already built to, no, not this one. But when you go to the Indie Stack, I'll just show it really quick.

[00:05:19]
So when you bootstrap your own app, this is all built in to do the render to pipeable stream thing from React. So yeah, it's all ready for you to stream, and it's great. And we'll talk about it in the Advanced Remix Workshop as well. Yeah, that's where we start getting outrageously really cool performance characteristics and nice levers to decide what tradeoffs you're happy with and stuff, it's really great.

[00:05:48]
Cool, all right, so that was super fun. Thanks for joining me on this adventure of Progressive Enhancement and Exercise 6.