What is the benefit of using no-prefetch on nuxt-link?

user_1076116 0
Viewed 2455

I understand the benefit of using nuxt-link over a is that it increases responsiveness of my website because of prefetching. Now reading nuxt-link component page in nuxtjs.org, I see that there is a way to take out the prefetching by using no-prefetch.

I have difficulty understanding why you would want to use nuxt-link if this is the case? Wouldn't you want to use something else? Why would you still use nuxt-link?

nuxt.js
2 Answers

If you are using an anchor tag, you are not making full use of your SPA. Your page will just fully reload when navigating between links.

<nuxt-link /> hooks into Vue Router. So when you click on a nuxt-link, the page does not reload. Because the client side routing takes place. Which is much faster and probably one of the reasons why you went for a SPA in the first place anyway.

Prefetching is a cherry on top. If you want extra performance, let the prefetching happen. But won't be a big deal if you won't use it.

user_6948770

You don't need to use it, if you don't needed. Simple.

I'm not sure what do you mean about you want to use something else.

nuxt-link just a wrapper of router-link, with some adjustment. So, if you don't need prefetch, nuxt-link just router-link.

What's the benefit of using nuxt-link (router-link) instead of just plain a tag?

nuxt-link has a lot off stuff, for example if you need to generate link with named routes.

Let's imagine if you have generated routes something like this:

{
  path: "/users/:userId?/posts/:id?/:slug?",
  component: _33r1e47x,
  name: "users-id-posts-id-slug"
}

You just need to write

<nuxt-link :to="{ name: 'users-id-posts-id-slug', params: { userId, id, slug }}"></nuxt-link>

instead of

<a :href="`/users/${userId}/posts/${id}/${slug}`"></a>
user_44840160
Related