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

Question

我的问题是，我不理解像Next.js这样的服务器端渲染单页应用框架如何在前端接收到完整的预渲染HTML而无需重写整个页面。例如，Next.js网站说明了以下内容:

默认情况下，Next.js对每个页面进行预渲染。这意味着Next.js提前为每个页面生成HTML，而不是通过客户端JavaScript完成所有操作。预渲染可以提高性能和SEO。 每个生成的HTML与该页面所需的最小JavaScript代码相关联。当浏览器加载页面时，其JavaScript代码会运行并使页面完全交互。（此过程称为水合作用。）

我理解这如何增强SPA在第一次加载页面时的响应性能。但在第一次加载之后，什么使服务器端渲染与SPA兼容？ 我认为这是一个我无法理解的基本误解，因此以下是一些进一步的问题，可能有助于您理解：

1. SSR SPA是否总是响应完整预渲染的HTML，还是只针对首次加载页面？
2. 如果第一个问题的答案是肯定的，那么在随后的响应中，客户端如何高效地渲染仅差异部分而不是重新编写整个页面？

否则，如果后者为真，则SSR SPA的后端如何知道它正在响应第一个请求时，响应应该是整个HTML，而不是后续的请求，当页面的大部分内容已经存在时，只需要发送一些相对较少的信息?

我在SSR与SPA兼容方面的理解有什么误解？

非常感谢提前回答这个问题的每个人！

- Lenny Zhou

---

我认为我们没有任何名为“SSR SPAs”的东西，单页应用程序自然地在客户端呈现。尽管如此，我们可以混合客户端渲染和服务器端渲染。 - Mahdi Ghajary

Answer 1

通常情况下，SSR用于页面的初始渲染，所以对于第一个问题 - 第一次加载页面。

这是必要的，这样SPA将更加符合SEO（也可能有一些性能改进，但通常是次要目标），搜索引擎爬虫将能够解析页面而无需JS。

SSR通常有几个重要的步骤：

1. 服务器渲染 2. 将渲染数据发送到浏览器 3. 水合。水合-是一个ReactJS（因为我们在这里谈论next.js）的“函数”，它将服务器渲染的HTML绑定到前端的React。因此基本上将服务器渲染的DOM绑定到虚拟DOM。

在水合步骤之后，您基本上拥有一个完全功能的正常SPA，它具有自己的路由和能够自行获取数据的能力。

通常，您在BE上有不同的端点来获取数据和渲染页面。因此，BE上的渲染过程与FE上的类似-您的应用程序后端从单独的端点获取数据，应用所有逻辑并渲染应用程序。

顺便说一下，为了确保服务器端渲染（SSR）正常工作，有一个原则叫做“同构代码”，即如果你使用一个用于数据获取的库，它必须支持node.js和浏览器的API。这就是为什么，例如，当你有一个Next.js应用程序时，你必须使用Next.js自己的路由器——它可以在前端和后端都正常工作，而不像react-router那样需要额外的步骤来实现这一点。

- Nausik