为什么绝大部分桌面网站没有采用单页应用 (SPA) 模式?

SEO 的问题完全可以通过「通用服务端渲染 (universal rendering)」(或者叫「同构渲染 (isomorphic rendering)」) 解决啊?即使应用了前端框架,比如知乎,仍然有很多页面是点开一个新页面并重新走服务器渲染的,这里面有什么门道吗?为什么不做成完全的单页?
关注者
250
被浏览
37880

20 个回答

从我目前接触的项目来看,很多网站没有做成SPA并不是技术原因,而大多数是业务划分和遗留代码的问题。

很多网站不同的业务或者产品对应不同的业务和开发部门,因此他们会独立开发自己业务的网页(目前基本上都选择SPA了),然后再去和主站集成,这里“集成”一般都会直接在主站添加入口链接。有时候选择多页面模式也是刻意为之,如果业务复杂多样,在一个SPA上加载太多东西势必会影响网站性能,将不同业务做成多个SPA,对用户体验影响并不大,但是会简化业务的独立开发、部署和维护。

另外就是遗留代码的问题。前端技术更新太快,一般新成立的项目都会选择使用新的框架语言,遗留代码都是旧的技术栈,如果想要做成SPA,那意味要在一个页面加载多个框架,必然会影响性能,因此会选择多页面,然后再做旧页面到新页面的迁移。

目前比较多被提及的前端微服务化,是希望多个前端服务能够整合到一个SPA上,但是由于技术问题目前还是有局限。

前面SEO、性能什么的都说过了,抛砖引玉,说说我的观点:


因为用户习惯和业务场景不同,SPA在PC端不一定具有更好的用户体验。



SPA在移动端更多使用,而移动端和PC端具有不同的用户习惯。

先来看看移动端和PC端的差异点:

SPA的主要优势是页面切换的优雅快捷,这个优势在机器、网速飞速发展的PC上不再显著,但有两个缺点是使用SPA后体验糟糕的部分:

  1. 无法满足并行需求。SPA同一时间只有一个页面,是线性的,而工作通常是并行处理各项事务。(据我观察,像我一样需要在至少5个代码仓库和10+个chrome tab页里来切换工作的人不少)
  2. 上下文自动销毁。试想一下这2个场景,假如使用SPA单页跳转的话:

第一个场景:

(1)一个长的table,里面放在一条条你要处理的数据;

(2)你根据4项指标搜索出某N条数据;

(3)然后你点进第1条数据的详情页查看并处理;

(4)然后……你就没有其他办法还原到第2步的上下文了。无论是后退还是面包屑导航。

(5)但如果是新开tab的多页应用,你就只需要在第4步关掉新开的tab就行。

第二个场景:

(1)打开知乎首页

(2)哇,有轮带逛点赞的小姐姐的照片和一个讨论前端的技术问题。虽然小姐姐很好看,但工作使我快乐,我还是先点开技术问题。

(3)看完技术问题。然后……feed流刷新,你就看不到小姐姐的问题了……

(4)但如果是新开tab的多页应用,你就只需要关掉新开的tab就行。

(貌似知乎最近解决了这个问题,但以前一直是痛点)


上面两个场景,本质上都是页面切换时spa自动销毁了上下文,上下文也不是不能保存,只是通常成本较高。


技术只使用在合适的场景,考虑收益和成本的情况下,PC端不一定非使用单页应用不可。

欢迎指正。


P. S. 天猫诚邀前端技术专家入伙共谋大事,欢迎联系yueyuan.cx@alibaba-inc.com