我的问题是，我无法理解像Next.js这样的服务器端渲染单页面应用程序框架如何在前端接收预渲染的完整HTML，而无需重写整个页面。例如，nextjs网站声明如下：
默认情况下，Next.js预渲染每个页面。这意味着Next.js提前为每个页面生成HTML，而不是全部由客户端JavaScript完成。预渲染可以带来更好的性能和SEO。每个生成的HTML都与该页面所需的最少JavaScript代码相关联。当浏览器加载页面时，它的JavaScript代码运行并使页面完全交互。（这个过程称为水合。）
**我理解这是如何在第一次页面加载时增强SPA的响应能力的。但是在第一次加载之后，是什么让服务器端渲染与SPA兼容？**我认为这是由于我无法理解的基本误解，所以我有一些进一步的问题，可能会帮助你理解它：
- SSR SPA总是响应完整的预渲染HTML，还是只响应第一个页面加载？
1.如果前者是真的，那么在后续的响应中，客户端如何有效地只呈现差异而不是重写整个页面？
1.否则，如果后者是真的，那么SSR SPA后端如何判断它何时响应第一个请求，何时响应应该是整个HTML，而不是随后的请求，何时页面的大部分已经存在，所有需要发送的是一些相对最小的信息？
关于SSR与SPA兼容的原因，我有什么误解？
提前感谢所有处理这个问题的人！
1条答案
按热度按时间8ljdwjyq1#
通常SSR用于页面的初始呈现，因此对于第一个问题-对于第一个页面加载
这是必要的，所以SPA将更加SEO兼容（也可能有一些性能改进，但它通常是次要目标），搜索引擎机器人将能够解析页面，而不需要JS
SSR通常有几个重要步骤：
1.服务器渲染
1.将渲染数据发送到浏览器
在水化步骤之后，你基本上有一个功能齐全的正常SPA，它有自己的路由，能够在自己身上获取数据。
通常你在BE上有不同的端点来获取数据和渲染页面。所以基本上BE上的渲染过程有点类似于FE上的-你的应用程序后端从不同的端点获取数据，应用所有的逻辑并渲染应用程序。
顺便说一句，为了确保SSR正常工作，有一个原则叫做“同构代码”-即如果你使用一个库进行数据提取，它必须同时支持node.js和浏览器API。这就是为什么，例如，当你有一个Next.js应用程序时，你必须使用Next.js自己的Router-它只在FE和BE上工作，而不像react-router，这将需要一些额外的步骤来实现