学习十九、常见的渲染方式

一、什么是渲染

- 渲染：数据 + 模板 拼接到一起

 

二、传统的服务端渲染

- 早期的 web 页面渲染都是在服务端进行的

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

- 前端没有足够的发挥空间

- 服务端压力大

- 用户体验一般

 

三、客户端渲染

- 后端主要负责处理数据接口

- 前端负责将接口数据渲染到页面中

- 前端更为独立，不再受制于后端

也存在于不足之处：

- 首屏渲染慢

- 不利于 SEO （搜索引擎）

 

四、基于客户端渲染的前端框架

- Angular / Vue / React

- 优点：用户体验好、开发效率高、渲染性能好、可维护性好等。

- 缺点：首屏渲染时间长、不利于 SEO

解决缺点：借鉴传统的服务端渲染

 

五、同构应用

- 通过服务端渲染首屏直出，解决 SPA 应用首屏渲染慢以及不利于 SEO 问题

- 通过客户端渲染接管页面内容交互得到更好的用户体验

- 这种方式通常称之为现代化的服务端渲染，也叫同构渲染。

- 这种方式构建的应用称之为服务端渲染应用或者是同构应用。

 

六、如何实现同构渲染

- 使用 Vue 、 React 等框架的官方解决方案

  - 优点：有助于理解原理

  - 缺点：需要搭建环境，比较麻烦

- 使用第三方解决方案

  - Vue 生态的 Nuxt.js

  - React 生态的 Next.js

 

七、同构渲染应用的问题

- 开发条件有限

  - 浏览器特定的代码只能在某些生命周期钩子函数中使用。

  - 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行。

  - 不能在服务端渲染期间操作 DOM。

  - 某些代码操作需要区分运行环境。

- 涉及构建设置和部署的更多要求

  - 需要构建服务端和客户端

  - 只能部署在 Node.js Server

- 更多的服务器负载

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

  - 如果应用在高流量环境下使用，需要准备相应的服务器负载。

  - 需要更多的服务端渲染优化工作处理。