Prefetch & Prerender

[00:00:00]
>> Maximiliano Firtman: The next and last pattern, because with a multi-page application we have less design patterns, because we don't have JavaScript, okay, here. So it's about the speculation rules. So if you are in the HTML, it's about prefetch, so you are in this HTML in the home, think about this, which is the most probable or probables recipes that you will click or the user will click?

[00:00:26]
>> Student: The first two.
>> Maximiliano Firtman: The first two, right, because they are bigger, larger, so it's more probable, of course, you can use your own stats, you actually get real data, real user metrics, but let's say the first two. So how can I tell the browser in my index.html that I want the browser to prefetch or prerender the first two?

[00:00:50]
How would you do that? There is a history of different meta tags that were available before link, we used to have a link rel prerender. It doesn't exist anymore, so it was deprecated. So that's not the case, also, using service workers, you can use the CacheStorage as well to do it manually.

[00:01:09]
But now we have speculation rules that look weird initially. We are going to create a script, but not in JavaScript, with the type speculation rules. You said, what? Yeah, we're going to create a script with the type speculation rules. Inside we're going to write JSON, so it's like metadata written in JSON in the HTML.

[00:01:37]
And we're going to specify that we wanna prerender, that there is a prerender group here that is an array of URLs. And URLs, actually, it's an array, URLs, yeah, that's okay, where I can add different URLs in an array. For example, I can add fish-tacos.html, that's the first one.

[00:02:06]
>> Maximiliano Firtman: And I can have vegetarian-pho.html, like so. Instead of prerender, I can also use prefetch. Remember, prefetch will just download the HML, but not render the content, and prerender will do all the stuff, so that's all. The API can get more complex, you can use regular expressions, there are a lot of things you can do, you can add more groups.

[00:02:35]
If you are in the website, do I have it?
>> Student: No?
>> Maximiliano Firtman: Here when you get into Prefetch, the last chapter, there is a link here for the documentation, for the speculation rules API, where you can see that it can get complex, okay? The rules that you can set to the browser, okay, to actually make it work.

[00:03:04]
And, I mean, when we render this, mostly if it's local, we won't really see a big difference, okay? But now the browser will prerender those URLs, and by the way, the browser is or using the best effort scenario. So it might decide, for example, if you're on Chrome on Android and you are in roaming or in Gigi for some reason, it can decide not to prerender the URL.

[00:03:35]
So it's a best case scenario, it's not guaranteed to happen, okay? And the browser, when it has time and there is nothing else to do, the browser will say, okay, let's go and prerender the next two elements, so now it's faster, they are already there, okay? So I don't have the transition here because I don't have the Vue transition name, but they are already there.

[00:04:00]
And of course, then you can go here and say, okay, what's the possible next? On each HTML, you can set your own rule. What's the possible next page after this one? Maybe the home page, well, then you set the home page, the index.html. And if you're using a server side framework or library, of course, you can create these speculation rules APIs dynamically, based on rules or stats.

[00:04:27]
They can be a stats per user, if the user is logged in based on the previous navigation of that user, blah, blah, blah, blah.