服务端渲染如何兼容单页应用？
How is server-side rendering compatible with single-page applications?
我的问题是我无法理解像 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 兼容有什么误解？
非常感谢所有解决这个问题的人！
欢迎使用 Whosebug :)
通常 SSR 用于页面的初始渲染，所以对于第一个问题 - 用于第一个页面加载
这是必要的，这样 SPA 将与 SEO 更加兼容（这也可能会带来一些性能改进，但这通常是次要目标）并且搜索引擎机器人将能够在不需要 JS 的情况下解析页面
SSR通常有几个重要的步骤：
- 服务器渲染
- 将渲染数据发送到浏览器
- 补水。 Hydration - 是一个 ReactJS（因为我们在这里谈论的是 next.js）'function'，它将服务器渲染 HTML 绑定到前端的 React。所以基本上将服务器渲染的DOM绑定到虚拟DOM
在水合步骤之后，您基本上拥有一个功能齐全的普通 SPA，它有自己的路由并能够自行获取数据。
通常您在 BE 上有不同的端点来获取数据和呈现页面。所以基本上，BE 上的渲染过程与 FE 上的渲染过程有点相似——您的应用程序后端从不同的端点获取数据，应用所有逻辑并渲染应用程序。
顺便说一句，为了确保 SSR 正常工作，有一个叫做 'Isomorphic code' 的原则 - 即如果您使用库来获取数据，它必须同时支持 node.js 和浏览器 API .这就是为什么，例如，当你有一个 Next.js 应用程序时，你必须使用 Next.js 自己的路由器 - 它只适用于 FE 和 BE，不像 react-router，这需要一些额外的步骤来做到这一点
我的问题是我无法理解像 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 兼容有什么误解？
非常感谢所有解决这个问题的人！
欢迎使用 Whosebug :)
通常 SSR 用于页面的初始渲染，所以对于第一个问题 - 用于第一个页面加载
这是必要的，这样 SPA 将与 SEO 更加兼容（这也可能会带来一些性能改进，但这通常是次要目标）并且搜索引擎机器人将能够在不需要 JS 的情况下解析页面
SSR通常有几个重要的步骤：
- 服务器渲染
- 将渲染数据发送到浏览器
- 补水。 Hydration - 是一个 ReactJS（因为我们在这里谈论的是 next.js）'function'，它将服务器渲染 HTML 绑定到前端的 React。所以基本上将服务器渲染的DOM绑定到虚拟DOM
在水合步骤之后，您基本上拥有一个功能齐全的普通 SPA，它有自己的路由并能够自行获取数据。
通常您在 BE 上有不同的端点来获取数据和呈现页面。所以基本上，BE 上的渲染过程与 FE 上的渲染过程有点相似——您的应用程序后端从不同的端点获取数据，应用所有逻辑并渲染应用程序。
顺便说一句，为了确保 SSR 正常工作，有一个叫做 'Isomorphic code' 的原则 - 即如果您使用库来获取数据，它必须同时支持 node.js 和浏览器 API .这就是为什么，例如，当你有一个 Next.js 应用程序时，你必须使用 Next.js 自己的路由器 - 它只适用于 FE 和 BE，不像 react-router，这需要一些额外的步骤来做到这一点