Prefetching
๐จโ๐ผ Now that we have client-side JavaScript, we can start doing cool things to
improve the user experience. Thanks to the way Remix has us structure our code,
Remix knows exactly the code and data needed for every route just by looking at
the URL. So when we render a link like this:
<a href="/users/kody/notes">Kody's Notes</a>
Remix knows the code and data needed to render that page just by looking at the
URL. So when it appears that the user is going to click on that link, Remix can
start loading the code and data for that page in the background. This is called
prefetching. When the user clicks on the link, the page will be rendered
instantly because the code and data is already loaded!
Checkout
๐ the Link prefetch docs
for more info on how to take advantage of this. We don't want to add this as a
default to all links because that would probably be overkill, but we definitely
want it on the links on the user profile page. Could you do that please?
Let's also add it to each of the note links in the list of notes.
To test it out, open up the network tab and/or the elements, and see what
happens when you hover over the link you add these props to.
