reactjs - 服务器端渲染如何与单页应用程序兼容？

Question

我的问题是我无法理解服务器端呈现单页应用程序框架(如 Next.js)如何在前端接收预呈现的完整 HTML，而不必重写整个页面。例如，nextjs 网站声明如下:

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. Pre-rendering can result in better performance and SEO.Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

我了解这如何增强 SPA 在第一页加载时的响应能力。但是在第一次加载之后，是什么让服务器端渲染与 SPA 兼容？ 我认为这是由一个我无法理解的根本误解引起的，所以这里有一些我有的进一步问题可能会帮助你理解它:

SSR SPA 是否总是以完整的预渲染 HTML 响应，还是仅响应第一页加载？

如果前者为真，那么在后续响应中，客户端如何有效地仅呈现差异而不是重写整个页面？

否则，如果后者为真，那么 SSR SPA 后端如何判断何时响应第一个请求，何时响应应该是整个 HTML，而不是后续请求，何时大部分页面已经存在等等需要发送的是一些相对最少的信息？

我对 SSR 与 SPA 兼容的原因有什么误解？
非常感谢所有解决这个问题的人!

Answer 1

欢迎使用 Stackoverflow :)
通常SSR用于页面的初始渲染，所以对于第一个问题——对于第一页加载
这是必要的，因此 SPA 将与 SEO 更加兼容(这也可能会带来一些性能改进，但这通常是次要目标)并且搜索引擎机器人将能够在不需要 JS 的情况下解析页面
SSR通常有几个重要的步骤:

服务器渲染

将渲染数据发送到浏览器

水合作用。 Hydration - 是一个 ReactJS(因为我们在这里谈论的是 next.js)“函数”，它将服务器渲染的 HTML 绑定(bind)到前端的 React。所以基本上将服务器渲染的 DOM 绑定(bind)到 virtualDOM

在水合步骤之后，您基本上拥有一个功能齐全的普通 SPA，它有自己的路由并能够获取自身的数据。
通常，您在 BE 上有不同的端点来获取数据并呈现页面。因此，基本上 BE 上的渲染过程与您在 FE 上的渲染过程有些相似——您的应用程序后端从不同的端点获取数据，应用所有逻辑并渲染应用程序。
顺便说一句，为了确保 SSR 正常工作，有一个叫做“同构代码”的原则 - 即如果你使用一个库来获取数据，它必须同时支持 node.js 和浏览器 API。这就是为什么，例如，当你有一个 Next.js 应用程序时，你必须使用 Next.js 自己的路由器 - 它只适用于 FE 和 BE，不像 react-router，这需要一些额外的步骤来实现