Next.JS “Link” vs “router.push()” vs “a” 标签

Question

新手在这里，对不起，如果这是一个非常基本的问题，但我无法理解应该遵循哪种技术来浏览各个页面。

到目前为止，我知道三种不同的方法可以实现这一目标：

1. next/link导出的链接组件
2. router.push()使用 useRouter 导出 ny next/router
3. 简单 HTML <a></a>

<Link href="/about"><a>About me</a></Link>
<a href="/about">About me</a>
<button onClick={() => router.push("/about")}>About me</button>

所有方法都有效并实现了相同的目标。 我只是想知道这些方法之间有什么区别（如果有的话）。 非常感谢您！

Answer 1

路由器.push

router.push('/push')行为类似于 window.location。 它不会创建<a>标签，这意味着 - 如果您关心 SEO，爬虫将不会检测到您的链接。

<Link>

但是， <Link>将创建一个<a>标记，这意味着当爬虫抓取您的网站时，您的链接将被检测到。 最终用户仍将在不重新加载页面的情况下进行导航，从而创建单页应用程序的行为。

<a>

<a>标签不使用 next/link 的<Link>创建一个标准超链接，将最终用户引导到 url 作为新页面。 （标准行为）。

您应该在整个网站中使用<Link> ，并在需要重定向的地方使用 router.push 以保留单页应用程序的行为。

Answer 2

按钮用于操作，链接指向 go 某处。

如果您使用的是 NextJs，我假设 SEO 在这里对您很重要。

在做出决定之前考虑这些：

1. router.push()主要用于事件处理程序（此处为onClick ）。 这是一个动作。 因此，假设您单击按钮，然后执行一些任务，并根据结果将用户带到另一个页面。 然后你会想使用router.push() 。 不要只用它来 go 到另一个页面。 请注意，如果您希望它被抓取，这对 SEO 不利。

2. <Link>为你做了一些繁重的工作，并且有一堆你可以传递的道具来定制它。 这是您大部分时间需要将 go 转到另一个页面。 当您使用它时，默认浏览器重新加载整个页面的行为（如您在<a>标记中看到的那样）将被覆盖。 爬虫将其视为指向另一个页面的链接，因此对 SEO 有好处。

3. <a>标签只是一个普通的 HTML 元素，具有所有默认行为。 当您使用它时，会发生完全重新加载。 如果您正在使用它，请尝试切换到<Link> 。 类似于<Link>它对 SEO 有好处。

Answer 3

除了提供的原因之外， <Link>组件还包括预取。 这意味着由视口中的任何<Link>链接到的所有页面或悬停在其上的所有页面都会提前加载，准备好在单击时显示。

Answer 4

所有其他答案都指出了每种方法的特征，尤其是它如何影响您的 SEO。

不过需要注意的一点是，使用<Link>并不总是自动创建<a>标记。

在后台， <Link>仅在您将字符串作为子项传递时才创建<a>标记。 传递所有其他元素，例如<div> ，除了<a> ，不会创建<a>标记来包装你的底层组件。 当这种情况发生时，Next/Link 只会使用 Next/Router 进行命令式路由，因此不会给 SEO 带来任何好处。

源代码