现代化的服务端渲染-同构渲染

拨云见日

本篇文章主要是讲解传统的服务端渲染、客户端渲染，以及同构渲染，希望可以帮助到大家
仅限于描述不涉及原理，望大家勿怪

渲染

什么是渲染，渲染 = 数据和模板添加到一起

对于前端开发者来说最常见的场景就是，向后端请求接口，把请求到的数据通过模板绑定语法，将数据绑定到页面中

最终呈现给用户，那么这个过程中就叫做渲染，渲染的本质其实就是字符串的替换实现方式有很多种

传统的服务端渲染

服务端渲染原理/流程：

1、客户端发起请求

2、服务端响应请求通过数据库查询页面所需数据

3、服务端得到所需的数据

4、服务端将数据和页面模板渲染为HTML

5、服务端将HTML返还给客户端

6、客户端收到内容直接展示给浏览器了

优点:有利于SEO，有助于搜索引擎优化

缺点：

1、前后端代码完全耦合在一起，不利于开发维护

2、前端没有足够发挥空间

3、服务端压力大

4、用户体验一般

客户端渲染

基于上面的缺点，有基于Ajax技术大范围运用，诞生了客户端渲染

服务端只需要处理数据接口接口，这样就实现前后端分离了

后端处理数据接口 / 前端负责将接口数据渲染都页面中，前端更为独立，不再受制与后端

客户端渲染原理:

1、客户端请求一个地址

2、服务端返回空白的HTML页面 / 无实质内容 只有一些js脚本

3、页面拿到返回的内容 加载里面js代码, 如果js代码里面有动态数据

会发起Ajax请求，服务端响应这个请求，去服务器查询数据，然后返回数据

4、客户端拿到数据以后渲染页面

优点:

1、用户体验好

2、开发效率高

3、渲染性能好

4、可维护性好

缺点：

首屏渲染慢:客户端请求一个地址，服务端会响应请求，返回空白的HTML结构

携带js脚本，客户端加载返回的HTML结构，也加载js脚本，根据js脚本

渲染页面，如果js里面有动态内容会发起Ajax请求，综上所述客户端渲染请求次数较多

这样的话就造成首屏渲染慢

不利于SEO:客户端渲染SEO几乎为0，是因为搜索引擎爬取页面的时候无法找到关键字

因为所有的内容都是根据js脚本生成的，所以对搜索引擎不够友好

同构渲染

同构渲染原理:同构渲染 = 后端渲染(服务器渲染) + 前端渲染

1、客户端请求一个地址

2、查询页面所需数据 也就是请求接口

3、返回数据

4、生成渲染页面及生成客户端SPA脚本，也包括SPA单页面程序运行所包含的脚本

5、然后把HTML(渲染好的页面内容 + SPA脚本)返回

6、客户端拿到HTML内容直接呈现内容给用户，这样就不用发请求了也不用执行渲染了

7、客户端通过页面中js脚本，把当前页面激活微SPA应用，之后的页面交互都是客户端渲染了
以上就是同构渲染的流程 

优点:核心解决SEO和首屏渲染慢的问题，

拥有传统服务端的优点也有客户端渲染的优点

缺点：
1、开发条件有限：浏览器特定的代码只能在某些声明周期钩子函数中使用

2、一些外部扩展可能需要特殊处理才能在服务端渲染中运行

3、不能在服务端渲染期间操作DOM

3、某些代码操作需要区分环境

5、设计构建和部署的要求更多

客户端渲染，仅仅要构建客户端即可，可以部署在任意服务器中

同构渲染需要构建两个端，而且只能部署在Node.Server中

6、更多的服务端负载

在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要占用大量的服务器资源

如果应用在高流量环境中使用，需要准备向相应的服务器负载均衡，需要更多的服务端渲染优化工作处理

服务端渲染使用建议

1、首屏渲染速度是否真的重要，有时候用户可能不在意初始的那几秒，可以交给骨架屏处理

2、是否真的需要SEO，如果是公司内部的管理系统那就不需要SEO了

谢谢观看，如有不足，敬请指教