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

Question

我目前正在处理 next.js tutorial ，但我正在努力理解以下内容:
教程告诉我here ，即点击 <Link> element 不会触发服务器请求，而是执行“客户端导航”，即使用 js 调整页面内容:

The Link component enables client-side navigation between two pages in the same Next.js app. Client-side navigation means that the page transition happens using JavaScript

直接问三个问题:

对我来说，这听起来像是没有 next.js 等的常规 SPA react 路由。但事实并非如此，对吧？

<Link>如果我在 Chrome 开发工具中禁用 javascript 仍然有效。这表明转换实际上并没有发生在 js 上。这与他们的说法相矛盾吗？

当我右键单击页面并单击“查看源代码”(在 Chrome 中)时，单击 <Link> 前后我得到不同的 HTML。 . (与“常规” react 行为相反)。这怎么能被认为是“客户端导航”？

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

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript

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

Answer 1

那里!
我认为你应该熟悉 Next.js 框架的主要概念是 服务器端渲染 ，这基本上意味着页面的所有内容都在服务器中进行了预处理，将已经呈现的文件发送到浏览器，从而节省了应用程序客户端的资源。
默认情况下，当您使用 时，所有 Next.js 页面都会被预渲染。构建 命令。
Next.js 也有自己的 <Link />使用 的组件下一个路由器模块在页面之间导航。
默认情况下，每个 <Link />页面中的组件告诉 Next.js 预取该页面及其资源(也将由服务器根据浏览器的初始请求呈现)，并在您单击它时“立即可用”。
我认为与常规 SPA 的主要基本区别在于，当您更改页面时，需要更长的时间，因为它们已经不可用了。