Question

从我收集的数据来看，SSR意味着，例如，当存在“ /” http请求时，您的服务器将获取该请求，并开始收集所有可复制的部分，例如jsx代码。然后，您的服务器将其呈现到“ index.html”页面。在您准备好index.html并将其发送到浏览器之后，因此在第一加载阶段，浏览器可以获取包含实际内容的HTML标记，而它所需要做的就是读取HTML并显示它！

我正确吗？

然后，例如，我们有另一个页面“ about.html”。我们的SSR服务器会发生什么？

当用户进入“ / about”页面时（不是通过导航，而是输入URL）。然后您的服务器呈现“ about.html”？如果是这种情况，是不是多页应用程序，因为服务器实际上在每个URL请求上呈现了多个页面？
否则，服务器仍会呈现“ /index.html”（包括与SPA有关的所有依赖项）并将其发送给客户端，浏览器会处理它并再次呈现“ / about”页面？这对我来说没有意义，因为搜索引擎始终无法从首次加载中读取“关于”信息，因为加载的HTML完全是关于“索引”信息的，并且直到用户才有关于“关于”的内容导航到“ / about”。对我来说，这听起来像是客户端渲染。

我什至不知道我需要搜索或了解更多信息。你们能给我一些提示吗？

Answer 1

在实现服务器端渲染（SSR）时，服务器知道如何生成带有标记的完整页面，以便用户获得完全渲染的页面，从那时起，当下载js资源时，该应用程序将处于活动状态（事件侦听器将被启用，反应生命周期将处于活动状态，依此类推。）
假设您的应用程序组件是应用程序的入口点，则常规的SSR实现将：

获取特定路径的请求
为该请求启动新的商店实例
如果使用React Router（或其他路由器解决方案），请用请求的路由填充状态
渲染应用程序，但不渲染和安装应用程序，而是将应用程序渲染为字符串（使用renderToString）
使状态脱水-拍摄最新的状态快照并将其附加到结果中（例如，转义并用脚本标签包装后）
返回标记作为响应。标记可能类似于以下内容：

<html>
...
...
<body>
    ...
    <App markup>
    ...
    <script><window.state = {state snapshot}></script>
</body>
</html>

浏览器获取html并将其呈现（在响应之前），因此用户已经在屏幕上有了东西
浏览器下载应用程序包
该应用程序捆绑包包括使用提供的状态快照（重新水化）来初始化状态的应用程序
将应用程序渲染到DOM中，如果正确完成，则不会发生实际的DOM渲染，因为结果将是相同的（应用程序渲染的状态与服务器中渲染的状态相同）
从这一点来看，该应用程序行为正常。任何路线更改都不会触发SSR引擎

SSR解决方案提供了一些现成的框架（例如next.js）以及根据路由进行代码拆分的方法。因此，当用户更改路由时，新的后端请求将再次触发新路由的SSR流。
SSR可以实现多种变体，但基本保持不变

希望这为理解SSR提供了一个很好的起点。

单页应用程序如何在SSR（反应式）中工作

1 个答案: