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

Question

我目前正在处理next.js tutorial，但我很难理解以下内容：

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

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

马上三个问题：

• 对我来说，这听起来像是没有 next.js 等的常规 SPA 反应路由。但事实并非如此，对吧？
• 如果我在 Chrome 开发工具中禁用 javascript，<Link> 仍然有效。这表明过渡实际上并没有发生在 js 中。这与他们的说法相矛盾吗？
• 当我右键单击页面并单击“查看源代码”（在 Chrome 中）时，我在单击 <Link> 之前和之后得到不同的 HTML。 （与“常规”反应行为相反）。这怎么能算是“客户端导航”？

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

默认情况下，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

Answer 2

那里！

我认为你应该熟悉 Next.js 框架的主要概念是 Server Side Rendering，这基本上意味着页面的所有内容都在服务器中进行了预处理，将已呈现的文件发送到浏览器，从而节省应用程序客户端的资源。

默认情况下，当您使用 build 命令时，您的所有 Next.js 页面都会预先呈现。

Next.js 也有自己的 <Link /> 组件，它使用 next-router 模块在页面之间导航。

默认情况下，页面中的每个<Link /> 组件都会告诉 Next.js 预获取该页面及其资源（也将在来自浏览器的初始请求时由服务器呈现）并“立即可用”当你点击它时。

我认为与常规 SPA 的主要基本区别在于，在那些页面中，当您更改页面时，需要更长的时间，因为它们已经不可用了。