【问题标题】：How single-page application works in SSR (React)单页应用程序如何在 SSR (React) 中工作
【发布时间】：2019-07-29 02:53:20
【问题描述】：
根据我收集到的信息，SSR 意味着当有 '/' http 请求时，您的服务器会收到请求并开始收集每一个可再现的片段，例如 jsx 代码。然后您的服务器将其呈现到“index.html”页面。在你的 index.html 准备好并发送到浏览器之后，在第一次加载阶段，浏览器可以获得包含实际内容的 HTML 标记，它所要做的就是读取 HTML 并显示它！
我说的对吗？
然后，例如，我们有另一个页面“about.html”。我们的 SSR 服务器会发生什么？
当用户进入“/about”页面时（不是来自导航，只是输入 URL）。然后你的服务器呈现'about.html'？如果是这样的话，不就是多页应用，因为服务器实际上是在每个 URL 请求上渲染多个页面吗？
否则，服务器仍然会呈现“/index.html”，包括所有与 SPA 相关的依赖项并将其发送到客户端，浏览器会处理它并再次呈现“/about”页面？这对我来说没有意义，因为搜索引擎无论如何都无法从第一次加载中读取“关于”信息，因为加载的 HTML 都是关于“索引”信息并且在用户之前还没有关于“关于”的内容导航到“/about”。对我来说，这听起来像是客户端渲染。
我什至不知道我需要搜索或了解更多信息。大家能给我一些提示吗？
【问题讨论】：
标签：
reactjs
single-page-application
next.js
server-side-rendering
csr
【解决方案1】：
在实现服务器端渲染 (SSR) 时，服务器知道如何生成带有标记的完整页面，以便用户获得完整呈现的页面，并且从那一刻起，当下载 js 资源时，应用程序将处于活动状态（事件监听器将被启用，反应生命周期将处于活动状态等等）。
假设您的 App 组件是您应用的入口点，一般的 SSR 实现将：
- 获取特定路径的请求
- 为请求启动一个新的存储实例
- 如果使用 react 路由器（或其他路由器解决方案），请使用请求的路由填充状态
- 渲染应用程序，但不是渲染和安装应用程序，而是将应用程序渲染为字符串（使用 renderToString）
- 脱水状态 - 获取最新的状态快照并将其附加到结果中（例如在转义并用脚本标签包装后）
- 将标记作为响应返回。标记可能类似于以下内容：
<html>
...
...
<body>
...
<App markup>
...
<script><window.state = {state snapshot}></script>
</body>
</html>
- 浏览器获取 html 并呈现它（在反应之前），因此用户已经在屏幕上看到了一些东西
- 浏览器下载应用程序包
- 应用程序包包含使用提供的状态快照 (Rehydrate) 启动状态的应用程序
- 应用渲染到 DOM 中，如果正确完成，不会发生实际的 DOM 渲染，因为结果将是相同的（应用渲染的状态与它在服务器中渲染的状态相同）
- 从此应用程序的行为正常。任何路由更改都不会触发 SSR 引擎
有几个框架（例如next.js）与 SSR 解决方案一起开箱即用，并根据路由进行代码拆分。因此，当用户更改路由时，新的后端请求会再次触发新路由的 SSR 流。
SSR 可以以多种不同的方式实现，但基本保持不变
希望这为理解 SSR 提供了一个良好的起点。