网页前端渲染后端渲染有什么区别？

---

前言

首先了解什么是前后端分离项目，现在项目都是使用集成框架进行开发的，以vue为例，页面都是动态生成的。如果页面在前端渲染，其缺点就是十分不利于搜索引擎优化…

---

一、前后端分离项目

前端 HTML 页面通过 Ajax 调用后端的 RESTFUL API 接口并使用 JSON 数据进行交互

二、 js渲染的项目

通过 Ajax 请求数据以后, 通过 JS 代码动态创建 html 的标签和数据等(一般右键查看网页源
代码 是看不到渲染后的 HTML 标签的)

三、前端渲染

指的是后端返回 JSON 数据，前端利用预先写的 html 模板，循环读取 JSON 数据，拼接字符
串（ES6 的模板字符串特性大大减少了拼接字符串的的成本），并插入页面。

1. 优点

网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能
仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

2. 缺点

前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前
在后台处理的交互逻辑交给了前端处理。占用少部分客户端