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

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

所以我的理解是

SSR:(请求......)→ 页面展示
SPA:(请求)→ 页面展示(白屏) → 页面展示

阅读 7.4k
2 个回答

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

image.png

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

  • 首屏体验差
  • SEO不友好

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

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

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题