What is a nuxtlink and why is it magic?

In the below video, I open up the google console to show in more detail what's going on under the hood. Feel free to follow along in your own browser.

We're all well aware of the old fashioned web link. You click on it and a page loads in your browser. Simple.

But when we stop to think about what's going on in the background, you come to realise that while simple and effective, maybe there's ways to improve upon this interconnectivity, especially when linking to pages on the same site.

If I click on an old fashioned link, the browser loads all of the assets needed for that page. But what if it didn't have to. What if it only loaded the new assets that it required instead of heading to the server to get everything again. That would be cool right?

Better again... why wait to get those outstanding assets. Why not fetch them in the background before the user has even decided to click the link. Well then the browser doesn't have to wait for any assets...

There inlies the power of the Nuxt Link.

Using Nuxt links we:

  • Improve user experience by slashing load times
  • Reduce server loads by only requesting what's needed
  • Option to introduce css transition between page loads
  • The browser url changes, mimicking the behaviour of the old fashioned link.

The fact that it mimicks the old-fashioned link's behaviour helps to avoid any potential user confusion.

And there you have it. The Nuxt link is just one of the tools at our disposal that helps us build FAST web apps.