最近1年多,前后端同构慢慢变成一个流行词,也许很多人还停留在前后端分离的最佳实践道路上,但实际上又有一批人已经从简单的服务端渲染走向探索最佳前后端同构方案的路上了。不过,我只是膜拜后者的过客。
虽然大家可以去网络搜索一下相关的概念解释,但这里我还是简单列举一下,我理解的术语。
1、前端渲染:浏览器一侧使用js,借助模版或vue、react、angular等框架做的DOM结构生成。
2、后端渲染:服务器一侧,使用php、nodejs等技术实现DOM结构生成,并在HTTP请求中返回给浏览器。
3、同构:浏览器一侧的JS、HTML和服务器一侧使用的JS、HTML使用同样的开发结构,同样的开发思路,同样的开发模式,尽可能实现代码复用。
明确一点,作为有追求的前端开发,我们不应该盲目跟风,一切需要从实际出发。
那么,首先,我们需要了解为什么会有同构这个概念出现。
Web开发的历程是很有趣的,最初php、asp的年代,一切内容都是服务器渲染的;
再后来为了节省服务器资源,也更大限度利用客户端缓存,又出现了前后端分离的模式,从而有了专业的前端开发和后台开发。此时Web的特点是,js和html放到静态目录,也可以CDN扩散,并以ajax方式获取后台的数据,在前端进行DOM组装。这种开发方式沿用至今,这是一个好的工作模式,专业的人做专业的事,确实有利于工作效率提高。
再而,随着nodejs的流行,前端jser们又开始蠢蠢欲动,尝试吞并web接入这个后台的前沿地盘,把后台推到更后。大概2014年后,又出现了很多nodejs直出的方案,把页面数据都一次在HTML的请求中返回,无需浏览器端再发起ajax获取数据,而且服务器端把DOM结构都渲染好,浏览器按trunk直接做图形渲染即可。不得不说,这个方案带来了很多好处:首屏速度更快,浏览器更省电。当然,随之而来的,就是更复杂的工作模式,jser需要做服务器端的逻辑,甚至一些代码需要同时用在浏览器和nodejs上。
针对前边的问题,同构的探讨就开始了。。。
百度搜一下前后端同构,清一色的vue、react。这些确实是同构,但我认为范围太窄,同构不是框架带来的问题,而是因为前后端独立渲染这种架构层面带来的问题。
当然,那些同构探讨也是非常有价值的,但不在本文的讨论范围内,在这里我更想表达一下,如何从实际项目需求的角度来看,找出自己所需的同构之道。
毕竟,要知道,同构不是为了跟风耍酷,也不是为了跳槽面试的时候博点好感。同构,是为了提高用户体验的同时,提高团队的工作效率。
接下来,我想根据项目的类型,说说自己的看法。
第一种,单页面应用。
这个网站很类似一个APP,确实很有必要做成单页应用,有助于提高用户体验。
如果第一步选择了单页面应用,这里就衍生了另外的问题——SEO。而react等框架做了服务器渲染,最大目的其实也是解决SEO。
既然浏览器端选择了某个框架,例如React,而同时又考虑nodejs直出提高首屏的速度,那么就没有讨价还价的余地了,当然上react全家桶,前后端都用react。