为什么 SSR 比 SPA 快，反之亦然？
why is SSR faster than SPA and vica versa?
我已经阅读了很多有关 SPA 与 SSR 的文章，也许我了解它的真实想法，也可能不了解。我真的很感激有经验的人可以告诉我我的假设是否正确或有意义。
观察 1)
SPA - 客户端请求 www.example.com，从浏览器到服务器。服务器 returns index.html 只有 <div id="app"></div> 和 javascript 文件的脚本源。浏览器再次请求那个捆绑的 js 文件，服务器 returns 它。之后返回的 js 文件启动并开始执行。编译完成后，页面显示给用户。
SSR - 客户端请求 www.example.com 从浏览器到服务器。服务器做所有事情，进行任何 api 调用或其他事情，将所有内容放入 html 和 returns html。如果这些 html 有一些样式或其他 js 源，浏览器也会对这些进行请求。
我的看法 - 为什么SSR更快？是不是因为在 SPA 的情况下，它必须下载整个网站的整个 js 文件？在 SSR 情况下，仅返回用户输入的特定页面的内容？
观察 2)
SPA - 如果页面已加载且用户单击其他路由之一，它不会向服务器发出任何请求以获取 html 以将其显示给用户。所有路由的 js 都已下载，因此无需向服务器发出请求，除非 Ajax 调用数据库中的一些动态数据。
SSR - 这将再次向服务器发出请求以获取新页面的 html 文件。
我认为 SPA 在这种情况下更快，即使 SPA 仍然需要对某些数据发出 ajax 请求。 Ajax 请求某些数据似乎比下载新呈现的 html 的请求更快，后者还需要在服务器上调用 ajax。
我知道 SSR 对 SEO 有好处，但我只对性能感兴趣。你怎么看？我说的都对吗？
关于您的第二个观察结果，SPA 不必预先下载所有内容。通过dynamic import，SPA可以在用户切换路由时按需下载资产。这是一项优化，可防止预先下载所有内容的开销。
就 SSR 与 SPA 而言，SSR 通常提供更好的用户体验。服务器可以通过 SSR 发送准备好呈现 HTML，因此应用程序主要使用最少的客户端逻辑进行调度和呈现结果。如果 SPA 是使用框架设计的，则大多数下载的资产都必须在呈现之前进行处理。但是，SPA 可以设计为在初始加载时提供最少的代码，然后在后台下载所有剩余的资产。
您可以使用 SPA 做很多事情，但是能够将处理卸载到专用服务器几乎总是成功的。但是，如果您担心用户带宽或者您正在开发移动应用程序，那么 SPA 可能值得考虑。 SSR 应用程序在这里仍然可以做得很好，但是如果您可以预先将资产放到用户设备上，那么与延迟相关的问题应该会更少。
同样，一切都取决于设计决策，但根据我的经验，SSR 应用程序的性能和可扩展性更高。
SPA
加载一次，自由导航。听起来不错，至少在理论上是这样。初始加载时间可能是一个负担。如果您的应用程序中有 6 个不同的屏幕，每个屏幕加载时间为 0.5 秒。您愿意每次到达一个新的时等待 0.5 秒，还是最初的 3 秒？对于大多数用户来说，任何长的加载时间都是不可接受的，因此通常最好以增量方式加载东西。
最重要的是，您通常需要实际 运行 为大多数现代 JS 框架（angular、vuejs、reactjs 等）在客户端浏览器中创建页面。 ..).在某些情况下，这可能会造成性能问题。
SSR
在服务器端生成所有内容，动态提供内容。对于代码拆分和让用户只加载他需要的内容听起来更好。最重要的是，您可以 运行 在功能强大的服务器而不是客户端 computer/phone/fridge.
上构建您的框架
但是，正如您所说，您需要更频繁地请求更多内容。为避免这种情况，大多数现代框架都能够创建部分路由，如果在路由时只需要更新部分页面，则可以在固定布局内动态加载页面片段。
但这还不是全部，介绍
服务工作者
Service Worker 和 SSR 合作得很好。如果您建立缓存优先策略，这意味着每次您的用户从页面 A 转到 B 再到 A，您将只加载 A 和 B 的应用程序片段一次。您的服务工作者将识别出您再次使用相同的片段并将其从用户缓存中拉出，而不是发出新的网络请求。
它让事情变得快如闪电。
此外，您还可以预加载内容。用户如果悬停 link ？开始加载此路由中使用的应用程序片段。它可能只节省几百毫秒，但当您加载小型应用程序片段时，您的用户会感觉瞬间完成。
那有什么收获呢？那么首先，如果您有一个静态应用程序，它实际上可能会更糟。 SPA 也存在缓存，如果您的应用程序足够小，您可能不关心在初始加载时间内节省的几毫秒。即使是更大的应用程序，它也主要取决于您的用户群。
但大多数情况下，SSR 需要一个实际的服务器才能 运行 应用程序。许多托管服务，如 firebase 或 aws，允许您托管静态文件，就像您可以用于 PWA 一样，以及从客户端轻松处理数据库，成本非常低，如果不是免费的话。 SSR 将需要一台服务器，因此作为这些服务，您的 运行 宁成本会增加。
SSR 为最终用户提供了可感知的性能改进。如果您同时使用 SSR 和 SPA，那么 SSR 会为最终用户提供快速查看的内容，直到 SPA 启动并且页面准备好进行交互。
我已经阅读了很多有关 SPA 与 SSR 的文章，也许我了解它的真实想法，也可能不了解。我真的很感激有经验的人可以告诉我我的假设是否正确或有意义。
观察 1)
SPA - 客户端请求 www.example.com，从浏览器到服务器。服务器 returns index.html 只有 <div id="app"></div> 和 javascript 文件的脚本源。浏览器再次请求那个捆绑的 js 文件，服务器 returns 它。之后返回的 js 文件启动并开始执行。编译完成后，页面显示给用户。
SSR - 客户端请求 www.example.com 从浏览器到服务器。服务器做所有事情，进行任何 api 调用或其他事情，将所有内容放入 html 和 returns html。如果这些 html 有一些样式或其他 js 源，浏览器也会对这些进行请求。
我的看法 - 为什么SSR更快？是不是因为在 SPA 的情况下，它必须下载整个网站的整个 js 文件？在 SSR 情况下，仅返回用户输入的特定页面的内容？
观察 2)
SPA - 如果页面已加载且用户单击其他路由之一，它不会向服务器发出任何请求以获取 html 以将其显示给用户。所有路由的 js 都已下载，因此无需向服务器发出请求，除非 Ajax 调用数据库中的一些动态数据。
SSR - 这将再次向服务器发出请求以获取新页面的 html 文件。
我认为 SPA 在这种情况下更快，即使 SPA 仍然需要对某些数据发出 ajax 请求。 Ajax 请求某些数据似乎比下载新呈现的 html 的请求更快，后者还需要在服务器上调用 ajax。
我知道 SSR 对 SEO 有好处，但我只对性能感兴趣。你怎么看？我说的都对吗？
关于您的第二个观察结果，SPA 不必预先下载所有内容。通过dynamic import，SPA可以在用户切换路由时按需下载资产。这是一项优化，可防止预先下载所有内容的开销。
就 SSR 与 SPA 而言，SSR 通常提供更好的用户体验。服务器可以通过 SSR 发送准备好呈现 HTML，因此应用程序主要使用最少的客户端逻辑进行调度和呈现结果。如果 SPA 是使用框架设计的，则大多数下载的资产都必须在呈现之前进行处理。但是，SPA 可以设计为在初始加载时提供最少的代码，然后在后台下载所有剩余的资产。
您可以使用 SPA 做很多事情，但是能够将处理卸载到专用服务器几乎总是成功的。但是，如果您担心用户带宽或者您正在开发移动应用程序，那么 SPA 可能值得考虑。 SSR 应用程序在这里仍然可以做得很好，但是如果您可以预先将资产放到用户设备上，那么与延迟相关的问题应该会更少。
同样，一切都取决于设计决策，但根据我的经验，SSR 应用程序的性能和可扩展性更高。
SPA
加载一次，自由导航。听起来不错，至少在理论上是这样。初始加载时间可能是一个负担。如果您的应用程序中有 6 个不同的屏幕，每个屏幕加载时间为 0.5 秒。您愿意每次到达一个新的时等待 0.5 秒，还是最初的 3 秒？对于大多数用户来说，任何长的加载时间都是不可接受的，因此通常最好以增量方式加载东西。
最重要的是，您通常需要实际 运行 为大多数现代 JS 框架（angular、vuejs、reactjs 等）在客户端浏览器中创建页面。 ..).在某些情况下，这可能会造成性能问题。
SSR
在服务器端生成所有内容，动态提供内容。对于代码拆分和让用户只加载他需要的内容听起来更好。最重要的是，您可以 运行 在功能强大的服务器而不是客户端 computer/phone/fridge.
上构建您的框架但是，正如您所说，您需要更频繁地请求更多内容。为避免这种情况，大多数现代框架都能够创建部分路由，如果在路由时只需要更新部分页面，则可以在固定布局内动态加载页面片段。
但这还不是全部，介绍
服务工作者
Service Worker 和 SSR 合作得很好。如果您建立缓存优先策略，这意味着每次您的用户从页面 A 转到 B 再到 A，您将只加载 A 和 B 的应用程序片段一次。您的服务工作者将识别出您再次使用相同的片段并将其从用户缓存中拉出，而不是发出新的网络请求。
它让事情变得快如闪电。
此外，您还可以预加载内容。用户如果悬停 link ？开始加载此路由中使用的应用程序片段。它可能只节省几百毫秒，但当您加载小型应用程序片段时，您的用户会感觉瞬间完成。
那有什么收获呢？那么首先，如果您有一个静态应用程序，它实际上可能会更糟。 SPA 也存在缓存，如果您的应用程序足够小，您可能不关心在初始加载时间内节省的几毫秒。即使是更大的应用程序，它也主要取决于您的用户群。
但大多数情况下，SSR 需要一个实际的服务器才能 运行 应用程序。许多托管服务，如 firebase 或 aws，允许您托管静态文件，就像您可以用于 PWA 一样，以及从客户端轻松处理数据库，成本非常低，如果不是免费的话。 SSR 将需要一台服务器，因此作为这些服务，您的 运行 宁成本会增加。
SSR 为最终用户提供了可感知的性能改进。如果您同时使用 SSR 和 SPA，那么 SSR 会为最终用户提供快速查看的内容，直到 SPA 启动并且页面准备好进行交互。