深究Web开发模式

深究Web开发模式

---

一、Web开发模式

目前主流的Web开发模式，大致分类两种：

1. ​ 基于服务器端渲染的传统Web开发模式
2. ​ 基于前后端分离的新型Web开发模式

二、服务端渲染开发模式

1、介绍

服务器端渲染开发模式是指：服务器端通过字符串拼接，动态生成html结构和数据，交由客户端浏览器直接渲染的方式。因此，客户端不需要使用Ajax这样前后端交互的技术额外请求页面数据。

2、优点

1. 前端耗时少。因为服务器端负责动态生成HTML内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电。
2. 有利于SEO。因为服务器端响应的是完整的HTML内容，所有爬虫更容易爬取获得数据，更有利于SEO。

3、缺点

1. 占用服务器端资源。由于是服务器端负责完成HTML页面内容的拼接，所有，如果请求次数较多，会对服务器造成一定的访问压力。
2. 不利于前后端分离，开发效率低。如果使用服务器端渲染的开发模式，则无法进行分工合作，尤其对于前端复杂度较高的项目，不利于项目的高效开发。

三、前后端分离开发模式

1、介绍

前后端分离的开发模式是指：前端写前端的页面，后端写后端的接口，互不影响，当后端接口写完后，前端开发人员使用Ajax这样的前后端交互技术再向服务器对应的接口额外请求页面对应的数据，并渲染到页面中，其主要依赖于Ajax技术的广泛应用。

简言之，前后端分离的Web开发模式，就是后端只负责写API接口，前端使用Ajax技术调用接口获取数据的开发模式。

2、优点

1. 开发体验度好。前端专注于UI页面的设计，后端专注于API接口的开发，且前端有更多的选择性。
2. 用户体验到好。Ajax技术的广泛应用，极大的提高了用户的体验度，可以轻松实现页面的局部刷新。
3. 减少了服务器端的渲染压力。因为页面UI是由前端开发人员设计的，页面的效果最终是要在每个用户的浏览器中生成的，所有服务器端的开发人员不必考虑那么多，并且无形之中服务器的压力也减少了很多。

3、缺点

不利于SEO。因为完整的HTML页面需要在客户端动态拼接完成，所有爬虫无法轻松、高效的爬取到页面的有效信息。不过我们可以使用Vue、React等前端框架的 SSR server side render 技术很好的解决SEO问题。

搜索引擎的基础爬虫的原理就是抓取你的url地址，然后获取你的html源代码并解析。 而你的页面通常用了Jquery等js的数据绑定机制来展示页面数据，爬虫获取到的html是你的模型页面而不是最终数据的渲染页面，所以说用js来渲染数据对seo并不友好。

四、如何选择开发模式

在Web开发中存在着一句网络用语：“不谈业务场景而盲目选择使用何种开发模式都是耍流氓”。可以看出选择开何种发模式要根据自身业务所处的场景而定夺，而并非让开发模式去选择业务。

1. 企业级的网站或者美工网站，其主要功能就是展示，而并没有复杂的前后端交互，并且需要良好的SEO，那么这个时候我们就需要使用服务器端渲染的开发默认，而使用前后端分离则比较大材小用。
2. 类似于后台管理项目，前后台交互性比较强，不需要考虑SEO，那么我们这个时候就需要使用前后端分离的开发模式，而使用服务端渲染则会大大增加我们服务器的压力，所有不建议使用。
3. 另外，具体使用何种开发模式并非绝对，如果为了同时兼顾首页的渲染速度和前后端分离的开发效率，我们可以采用首屏服务器端渲染，其他页面前后端分离的开发模式。

所有说，人是活的，开发模式、技术等都是死东西，我们要在合适的地方使用合适的技术和合适的模式，并且加以融会贯通，这才是最合适的开发模式，以提升开发效率为目的才是我们的最终目的。