Next.js - 客户端导航与 html 中的变化
Next.js - Client Side Navigation vs. changes in html
我目前正在研究 next.js tutorial，但我很难理解以下内容：
教程告诉我here，点击<Link>元素不会触发服务器请求，而是做“客户端导航”，即用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 反应路由。但事实并非如此，对吧？
- 如果我在 Chrome 开发工具中禁用 javascript，
<Link> 仍然有效。这表明转换实际上并没有发生在 js 上。这与他们的说法矛盾吗？
- 当我右键单击该页面并单击“查看源代码”（在 Chrome 中）时，我在单击
<Link> 前后得到了不同的 HTML。 （与“常规”反应行为相反）。这怎么能算是“客户端导航”？
进一步学习教程，他们告诉我 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 文件？如果是这样，这怎么可能发生在“客户端”。谢谢！
有！
我认为您应该熟悉 Next.js 框架的主要概念是 Server Side Rendering，这基本上意味着页面的所有内容都是 pre-processed 在服务器中，将已经呈现的文件发送到浏览器，从而节省应用程序 client-side 中的资源。
默认情况下，当您使用 build 命令时，所有 Next.js 页面都是 pre-rendered。
Next.js 也有自己的 <Link /> 组件，它使用 next-router 模块在页面之间导航。
默认情况下，页面中的每个 <Link /> 组件都会告诉 Next.js 到 pre-fetch 该页面及其资源（也将由服务器根据来自浏览器）并在您点击它时“立即可用”。
我认为与常规 SPA 的主要基本区别在于，在那些页面中，当您更改页面时，需要更长的时间，因为您无法使用它们。
以下是我的理解：
Next.js 客户端导航采用的方法是 SPA 风格导航和传统导航的混合
- 在SPA风格的导航中，“link”是一个带有一些JS逻辑的组件。它没有
<a> 元素。当你点击它时，一些 JS 会 运行 渲染新页面。如果禁用 JS，则无法导航到新页面；
- 在传统导航中，link 实际上是一个
<a> 元素。如果单击它，浏览器将丢弃当前页面并完全加载新页面。如果您禁用 JS，那么您仍然可以导航到新页面；
- 在Next.js 导航中，“link”是一个带有一些JS 逻辑的组件，但它的底层也有这个
<a> 元素。当你点击它时，一些 JS 会 运行 呈现新页面并阻止默认的 <a> 导航。 因此，即使您禁用了 JS，您仍然可以通过 <a> 元素以传统方式导航。 将获取并加载预呈现的页面。这在 SEO 方面非常有用（因为爬虫通常不启用 JS），并且是 Next.js 想要解决的主要问题。
简而言之，启用 JS 后，Next.js 导航的行为就像在 SPA 中一样；当 JS 被禁用时，它的行为就像在传统网站中一样。
更新：
我制作了一个视频来进一步演示这个概念：https://www.youtube.com/watch?v=D3wVDE9GGVE
我目前正在研究 next.js tutorial，但我很难理解以下内容：
教程告诉我here，点击<Link>元素不会触发服务器请求，而是做“客户端导航”，即用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 反应路由。但事实并非如此，对吧？
- 如果我在 Chrome 开发工具中禁用 javascript，
<Link>仍然有效。这表明转换实际上并没有发生在 js 上。这与他们的说法矛盾吗？ - 当我右键单击该页面并单击“查看源代码”（在 Chrome 中）时，我在单击
<Link>前后得到了不同的 HTML。 （与“常规”反应行为相反）。这怎么能算是“客户端导航”？
进一步学习教程，他们告诉我 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 文件？如果是这样，这怎么可能发生在“客户端”。谢谢！
有！
我认为您应该熟悉 Next.js 框架的主要概念是 Server Side Rendering，这基本上意味着页面的所有内容都是 pre-processed 在服务器中，将已经呈现的文件发送到浏览器，从而节省应用程序 client-side 中的资源。
默认情况下，当您使用 build 命令时，所有 Next.js 页面都是 pre-rendered。
Next.js 也有自己的 <Link /> 组件，它使用 next-router 模块在页面之间导航。
默认情况下，页面中的每个 <Link /> 组件都会告诉 Next.js 到 pre-fetch 该页面及其资源（也将由服务器根据来自浏览器）并在您点击它时“立即可用”。
我认为与常规 SPA 的主要基本区别在于，在那些页面中，当您更改页面时，需要更长的时间，因为您无法使用它们。
以下是我的理解：
Next.js 客户端导航采用的方法是 SPA 风格导航和传统导航的混合
- 在SPA风格的导航中，“link”是一个带有一些JS逻辑的组件。它没有
<a>元素。当你点击它时，一些 JS 会 运行 渲染新页面。如果禁用 JS，则无法导航到新页面； - 在传统导航中，link 实际上是一个
<a>元素。如果单击它，浏览器将丢弃当前页面并完全加载新页面。如果您禁用 JS，那么您仍然可以导航到新页面； - 在Next.js 导航中，“link”是一个带有一些JS 逻辑的组件，但它的底层也有这个
<a>元素。当你点击它时，一些 JS 会 运行 呈现新页面并阻止默认的<a>导航。 因此，即使您禁用了 JS，您仍然可以通过<a>元素以传统方式导航。 将获取并加载预呈现的页面。这在 SEO 方面非常有用（因为爬虫通常不启用 JS），并且是 Next.js 想要解决的主要问题。
简而言之，启用 JS 后，Next.js 导航的行为就像在 SPA 中一样；当 JS 被禁用时，它的行为就像在传统网站中一样。
更新：
我制作了一个视频来进一步演示这个概念：https://www.youtube.com/watch?v=D3wVDE9GGVE