reactjs Next.Js应用程序如何不重新加载,即使他们是预先渲染?

k10s72fa  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(144)

在我的职业生涯中,我一直在使用React和Next.Js,最近我的一个大三学生问我,传统的网站是否会因为从服务器获取所有的HTML和CSS文件而重新加载;那么Next.js应用程序为什么不重新加载,即使它们也是预先呈现的呢?据我所知,在Next.js中,HTML页面也是在服务器上生成的,服务器将预先呈现的“HTML FILE”发送到浏览器。它不只是获取JSON数据。它获取了一个完整的HTML页面!!
我无法给予他任何答案,我也很好奇这件事到底是怎么发生的?如果你们能帮我澄清我的疑惑就太好了。
干杯。先谢了。

bejyjqdl

bejyjqdl1#

你的想法是正确的。这取决于配置。现在我们可以谈论客户端渲染(CSR),服务器端渲染(SSR)或增量静态再生(ISR)。与v13的Next还有一个流功能。
但假设您正在询问有关服务器端呈现的问题,作为简化,基本上有两种类型的导航:

服务器端导航

  • 当你输入应用的一个网址,或者按F5、cmd + R等键时,就会触发服务器端渲染,这意味着你的服务器将运行react应用,获取应用的部分HTML版本(也称为脱水版本)沿着一些脚本包。
  • 然后,浏览器将运行这些包并执行水合,根据应用逻辑修改DOM。
    客户端导航
  • 执行完上一步后,当你进入应用程序时,通常会用next的Link组件 Package 应用程序的超链接,这样一来,next就会控制你在客户端点击超链接时会发生什么。
  • 这将导致一个底层的XHR请求发送到服务器,它将包含一个js包作为响应,这个包构建新的页面并替换DOM的相应部分。

“有趣的事实"

  • Next的导航处理允许浏览器保持主布局的状态,而不需要一直重建和重新呈现它。
  • 它还允许像预取这样的花哨操作。你的网站的大部分内容都是在后台自动构建的,这使得页面之间的转换非常快。
  • SSR(ISR...)的最大优势之一,在我看来,是搜索引擎获得你的应用程序的完整静态版本,拥有所有有用的语义信息,所以,更好的SEO。
  • 你有没有遇到过SSR页面中窗口对象的问题?当你的服务器在服务器端执行你的应用程序的一部分时,没有窗口对象,因为服务器环境没有窗口抽象(这似乎是逻辑,没有屏幕,没有窗口)。
    其他渲染策略

CSR基本上就是plain react所做的事情(直到v18,服务器组件发布)。一堆JS包在浏览器中提供和运行。
ISR。在这种情况下,您的页面将在构建时生成,并作为静态内容提供。您的页面将被缓存,但您可以调整重新生成频率,以保持页面更新,避免整个应用重新构建/部署。
简化的服务器端呈现
Incremental Static Regeneration
希望有帮助,欢迎建议/更正!

相关问题