Next.js - 客户端导航与 html 中的更改

Question

我目前正在学习next.js 教程，但我很难理解以下内容：

教程在这里告诉我，点击某个<Link>元素不会触发服务器请求，而是进行“客户端导航”，即用js调整页面内容：

Link 组件支持在同一 Next.js 应用程序中的两个页面之间进行客户端导航。客户端导航意味着页面转换使用 JavaScript 进行

马上问三个问题：

• 对我来说，这听起来像是没有 next.js 等的常规 SPA React 路由。但事实并非如此，对吧？
• <Link>如果我在 Chrome 开发工具中禁用 javascript，它仍然有效。这说明js实际上并没有发生转换。这与他们的说法是否矛盾？
• 当我右键单击该页面并单击“查看源代码”（在 Chrome 中）时，我在单击<Link>. （与“常规”反应行为相反）。这怎么能被认为是“客户端导航”呢？

在本教程中，他们进一步告诉我：

默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成这一切

这一说法听起来与上面引用的另一说法相矛盾。你能帮我澄清一下吗？当我点击时<Link>到底发生了什么？是否加载了新的 html 文件？如果是这样，这怎么可能发生在“客户端”。谢谢你！

Answer 1

我是这样理解的：

Next.js 采用的客户端导航方法是SPA 式导航和传统导航的混合体

• 在 SPA 风格的导航中，“链接”是带有一些 JS 逻辑的组件。它没有<a>元素。当你点击它时，一些 JS 将运行来渲染新页面。如果禁用 JS，则无法导航到新页面；
• 在传统导航中，链接实际上是一个<a>元素。如果单击它，浏览器将放弃当前页面并完全加载新页面。如果你禁用 JS 那么你仍然可以导航到新页面；
• 在 Next.js 导航中，“链接”是一个带有一些 JS 逻辑的组件，但它的<a>底层也有这个元素。当你点击它时，一些 JS 将运行来渲染新页面并阻止默认<a>导航。因此，即使您禁用 JS，您仍然可以以传统方式浏览该<a>元素。将获取并加载预渲染的页面。这对于 SEO 来说非常有用（因为爬虫通常不启用 JS），并且是 Next.js 想要解决的主要问题。

简而言之，当启用 JS 时，Next.js 导航的行为就像在 SPA 中一样；当 JS 被禁用时，它的行为就像在传统网站中一样。

更新：

我制作了一个视频来进一步演示这个概念：https://www.youtube.com/watch ?v=D3wVDE9GGVE