How does <Link> really work?

Unanswered

Gull Terrier posted this in #help-forum

Gull TerrierOP

2023-09-20T14:34:46.000Z

When I have <Link>s on the page. It seems like when I click the element, it doesnt change my browser url right away, it almost seems like it goes ahead and fetches that entire page and then reroutes. What am I missing to make it so that the page goes into my loading.tsx state while my server side logic finished fetching data?

For example, going from /work-queue?date=2023-09-20 to /work-queue?date=2023-09-21.

I have two ways of doing it. One where I have a button that is really a Link with styles.

The other way is when I click the date picker it will do a router.push("work-queue?date=new-date-here");

The page does take a bit to fetch the data. How can I make it so it displays my loading.tsx so the user knows what's going on....

What am I missing?

9 Replies

European sprat

2023-09-20T15:07:13.000Z

Does it have the same behavior in production build?

Gull TerrierOP

2023-09-20T15:21:37.000Z

yes, it does.

European sprat

2023-09-20T15:22:10.000Z

Show code and explain better your structure

@Gull Terrier When I have <Link>s on the page. It seems like when I click the element, it doesnt change my browser url right away, it almost seems like it goes ahead and fetches that entire page and then reroutes. What am I missing to make it so that the page goes into my loading.tsx state while my server side logic finished fetching data? For example, going from /work-queue?date=2023-09-20 to /work-queue?date=2023-09-21. I have two ways of doing it. One where I have a button that is really a Link with styles. The other way is when I click the date picker it will do a router.push("work-queue?date=new-date-here"); The page does take a bit to fetch the data. How can I make it so it displays my loading.tsx so the user knows what's going on.... What am I missing?

joulev

2023-09-20T15:22:51.000Z

<Link> is essentially <a> with onClick={() => router.push()}

so they should work the same way

the reason <Link> is preferred is because when js is disabled, it behaves like a normal <a>

and <Link> is SEO-friendly

Bonga shad

2024-05-17T05:42:20.282Z

@joulev Hi there, I search "Link SEO" and find this thread. Could you say more about "Link is SEO-friendly"? I have a bunch of Links in my landing page, and each Link routes to a different page on my website, so it's like <Link href='/california-hotels'> California </Link> <Link href='/new-york-hotels'> New York </Link> What I really want is that Google crawler can discover each of the pages i.e., www.mysite.com/california-hotels www.mysite.com/new-york-hotels But I am just afraid that it won't - I am sure if it's a tag, i.e., <a href="www.mysite.com/california-hotels">California</a> it will because the url is spelled out. Does the Google crawler have the ability to find the actual url when I use Link? Thank you

@Bonga shad <@484037068239142956> Hi there, I search "Link SEO" and find this thread. Could you say more about "Link is SEO-friendly"? I have a bunch of Links in my landing page, and each Link routes to a different page on my website, so it's like `<Link href='/california-hotels'> California </Link>` `<Link href='/new-york-hotels'> New York </Link>` What I really want is that Google crawler can discover each of the pages i.e., `www.mysite.com/california-hotels` `www.mysite.com/new-york-hotels` But I am just afraid that it won't - I am sure if it's `a` tag, i.e., <a href="www.mysite.com/california-hotels">California</a> it will because the url is spelled out. Does the Google crawler have the ability to find the actual url when I use Link? Thank you

joulev

2024-05-17T06:00:22.769Z

answered you in the other thread