前端渲染和后端渲染的优缺点
前端渲染:
- 定义:
指的是后端返回 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、占用服务器端资源