看了@huacnlee 写的 https://react-homeland.herokuapp.com/ 很赞 但是页面切换总有一个短暂的载入画面,性能好像不如 ruby-china, 体验也算很好。我理解这是 react 要等所有资源载入以后才开始渲染
如果保持前后端的分离,
是不是可以认为 react/vue 等框架适合 app 类型的应用,比如在线文档,而不是页面/内容型的 web 应用?
React 做的话,需要有复杂的 JS 生成 HTML,哪怕是用的是 SSR,这样意味着功能结构复杂,不利益优化,前端渲染的方式是把 HTML render 的动作放到前端了,看似 response time 很少,实际上用户端也需要一定时间的运算才能达到结果,并且前端渲染的方式难以做缓存,有缓存也无法所有用户通用。
实际上以我经验来看,像 Ruby China 这类以内容为中心的网站,用 React 或 Vue 这类前端架构实现出来效果,相比纯后端渲染会差一些。
因为这类内容为主的网站很多地方可以依靠 Fragment Cache 来优化渲染速度,减少没有复杂的前端/后端 HTML 生成部分的计算,大约 90% 的访问都是缓存命中,命中缓存简单拼装直接返回。
目前 Homeland 对大多数的 HTML 渲染结果有 Fragment Cache,并且经过多年的优化页面缓存已经做得很极致了。当然用 React / Vue 也可以优化到这样,仅限于 SSR 的方式。
Homeland 的页面缓存已经做到和用户无关,你可以分析看看,以目前这个页面的回帖列表为例,登录和不登录,登录的不同用户是有不一样的界面表现的(编辑权限、删除权限等等,跟当前用户优化),Homeland 的实现让 HTML 生成的数据无法,利用一些技巧来实现分权限的效果。这样在缓存的角度,回帖列表所有访问者的 HTML 输出都是一致的,于是我就可以直接把这个回帖列表的 HTML 直接缓存下来,除非有新增/删除/修改回帖,那么这个列表的缓存是一只有效的。
你可以简单理解,从物理的角度,计算少(HTML 生成复杂度),速度必然更快。Homeland 的实现或者说 Rails Views 这套设计理念就是减少 HTML 生成的复杂度,从而提升渲染速度。
实际上我目前的所在的公司,我们团队在大量的使用 React 和 Vue,React 是结合 Rails 开发,实现复杂前端功能,我也很认可这个方案,它能让我们从容应对产品提出的复杂交互需求,但仅限于做 App 类的应用,而不是 Web 应用(Web 应用或许可以做,只是目前我还没有能优化到 Homeland 这么极致响应的经验)。
我只是好奇
类似 ruby-china 的项目
用前端渲染和后端渲染,大家能感受到运行时间差异么?
我自己用 react 的理由主要有两点
直接操作 dom 变来变去,还要考虑状态很麻烦,react 的 data 直接确定 ui 在处理复杂应用时不用考虑过多细节与状态。
react 有丰富的 UI 组件可以用
至于页面渲染时间,10-50ms 我自己是感觉不到区别
非常感谢详细回复,帮助很大。我暂时就不考虑前后端分离的办法。才注意到 homeland 原来一直在更新,并且是 mit license,会考虑基于 homeland 做应用,谢谢 ruby-china 团队对社区的贡献!
按我最近的理解,react 的一个主要缺点就是首页载入的等待时间,也许只是几十 ms,在单页应用里它只出现一次,问题不大。但是在类似 ruby-china 这样的网站里,如果每个页面都重新加载等待这几十 ms,能感觉到延时。
显示器刷新频率 30 和 60 的差别只在 16ms, 差别是比较明显的。
首页载入倒不会在每个页面都出现,载入首页(或者任何一页)后,进入其它页面就是 ajax + 前端渲染了,比单纯服务端渲染快。然后 homeland 用了 rails 的 turbolinks 模拟 ajax + 前端渲染的效果,增加了换页的速度。
可以讲一下erb 的开发体验已经跟不上这个时代了
的原因吗?是哪个 next js 特性让你有这个观点?
看了 next js 的官网,比较吸引人的特性是零配置、ready for production。我没用过 next js,只用过 ant design pro,ant 也有这 2 个特性。
我喜欢 React、Vue 的原因跟 4L 一样:
不用用 JS 修改 DOM,关心 State 即可,框架会根据 State 渲染出对应的 UI UI 框架(ant design 等等)提供了丰富的组件 即使有这 2 个优点,对于网站后台类型的网页(交互相对简单),我觉得还是后端渲染方便些。
表单啊,就光是做表单,用 react+api 也比用 rails form 方便,重用方便,样式管理方便,逻辑也看得更清楚。后端渲染唯一的优势就是 seo,但是 next 可以全自动处理 ssr
后台啊,那就比文章型的更难了,我还以为说文章型的比前后分离方便,后台要是用到 sjr,那也是必然不可能比纯前端写方便的
服务器渲染网站还有一个优点,省内存省 CPU,不要小看这点,无论哪种应用,最后功能拼完了,就是拼性能,否则 zoom 也不会在会议软件一片红海中胜出了。