前端渲染和后端渲染的优缺点

前端渲染和后端渲染的优缺点

前端渲染：

• 定义：
  指的是后端返回 JSON 数据，前端利用预先写的 html 模板，循环读取 JSON 数据， 拼接字符串，并插入页面。

• 好处:
  1、前后端分离。前端专注于前端 UI，后端专注于 api 开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
  2、体验更好。比如，我们将网站做成 SPA 或者部分内容做成 SPA，这样，尤其是移动端，可以使体验更接近于原生 app。

• 坏处：
  1、前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要 耗费额外的时间，不如服务器端渲染速度快。
  2、不利于 SEO。目前比如百度、谷歌的爬虫对于 SPA 都是不认的， 只是记录了一个页面，所以 SEO 很差。因为服务器端可能没有保存完整的 html，而是前端通过 js 进行 dom 的拼接， 那么爬虫无法爬取信息。 除非搜索引擎的 seo 可以增加对于 JavaScript 的爬取能力，这才能保证 seo。

服务端渲染:

• 定义：

前端请求，后端用后台模板引擎直接生成 html，前端接受到数据之后，直接插入页面。

• 好处：

1、前端耗时少，即减少了首屏时间

2、有利于 SEO。因为在后端有完整的 html 页面，所以爬虫更容易爬取获得信息， 更有利于 seo。

3、无需占用客户端资源。即解析模板的工作完全交由后端来做， 客户端只要解析标准的 html 页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。

4、后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间 了，且对于数据变化不大的页面非常高效

• 坏处：

1、不利于前后端分离， 开发效率低
2、占用服务器端资源