关于SSR和SPA首屏速度的问题

Question

都说SSR首屏速度快，我怎么感觉SSR应该比SPA首屏渲染慢呢？因为SSR需要在Server端处理很多东西，而SPA只是简单的丢个Html而已（白屏问题）。
我觉得确切的说应该是SSR首屏比SPA慢，因为他返回的是数据处理完成之后的Html，他不会有白屏问题，并一定程度上缩短了SPA的白屏占用时间(Server端调用接口基本可以忽略网络阻塞)。

所以我的理解是

SSR：（请求......）→ 页面展示
SPA：（请求）→ 页面展示(白屏) → 页面展示

Answer 1

这里牵扯两个概念：CSR(Client Side Rendering) 和 SSR(Server Side Rendering)，下图可以看出，最大的区别在于首屏渲染

你提到的 SPA 应用就是以 CSR 方式渲染，其缺点：

• 首屏体验差
• SEO不友好

SSR方案就是为了弥补CSR的不足之处，当然也有其缺点：

• 上手成本高，原因在于需要依靠 node 服务，从前端转向全栈
• 同样 CSR 的优点也是 SSR 的缺点

你提到的 SSR 模式比 CSR 慢，确实如此，毕竟要在 node 层调接口组装数据生成模板，这里就需要根据业务情况考虑哪些内容适合 SSR, 哪些内容适合 CSR，尽可能减少 node 层渲染逻辑。

当然现在流行同构开发模式，也就是结合 SSR 与 CSR 两种渲染模式，代表框架有：

• react: next.js、umi.js
• vue: nuxt.js

Answer 2

之所以说ssr快，主要体现在http请求数量上，ssr只需要请求一个html文件就能展现出页面，虽然在服务器上会调取接口，但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取。

spa慢主要慢在需要请求大量的js资源，一般的首页，请求10几个js都算少到，要知道js的加载是同步的，页面逻辑可能藏在最后几个js里面，请求-等待-下载-然后是解析js-再调接口-展现页面。

项目足够小，那么谁快谁慢页不一定，越大的项目效果越明显。