2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?
文章目录
-
-
-
- 0.客户端渲染
-
- 什么是客户端渲染?
- 客户端渲染的优缺点是什么?
-
- 优点
- 缺点
- 客户端渲染的使用场景是什么?
- 1.服务器渲染
-
- 什么是服务器渲染?
- 服务器渲染的优缺点是什么?
-
- 优点
- 缺点
- 服务端渲染的使用场景是什么?
- 2.预渲染
-
- 什么是预渲染?
- 预渲染的优缺点是什么?
-
- 优点
- 缺点
- 预渲染的使用场景是什么?
- 3.服务端渲染和预渲染的异同
-
- 相同点
- 不同点
- 预渲染和服务器渲染的流程比较
-
- 预渲染的流程
- 服务器渲染的流程
- 总结
- 4.参考博文
-
-
0.客户端渲染
什么是客户端渲染?
客户端渲染(CSR)又称为前端渲染,
客户端渲染基于前后端分离的思想,即前端专注于JS,后端专注于逻辑,
前后端通过约定好的API来交互,前端根据后端提供的数据来生成DOM并插入到HTML页面中
对于单页应用(SPA)来说,默认采用客户端渲染
客户端渲染的优缺点是什么?
优点
- 减少服务器压力
- 首次加载完毕后,页面响应速度较快
- 可以局部刷新,无需每次都请求整个页面
- 可以实现组件复用和懒加载
- 结构清晰,开发体验友好(无需与服务器各项逻辑进行耦合)
缺点
- 首页速度慢,容易出现白屏(因为渲染前需下载大量s和css文件)
- 不利于SEO(爬取不到完整代码)
客户端渲染的使用场景是什么?
客户端渲染常用于交互性比较强,同时不注意SEO的页面
比如管理类的项目
1.服务器渲染
什么是服务器渲染?
服务端渲染(SSR)又称为后端渲染,
服务端渲染需要部署前端的服务器(如nodejs),其渲染过程如下:
- 服务器执行JS
- 构建HTML页面,并用数据填充
- 输出HTML给浏览器
服务器渲染的优缺点是什么?
优点
- 更快的首屏加载速度(因不需客户端重新渲染,已经在服务端渲染完毕)
- 有利于SEO(爬虫能抓取到渲染好的页面,获取网站关键信息)
- 节约客户端资源(客户端无需渲染,因此在移动端耗电量更少)
- 可以利用缓存机制(可以通过将一些页面缓存来提高响应速度)
- 数据具有实时性
- 无须关注浏览器兼容问题
缺点
- 服务器资源占用高
- 开发成本高(需考虑前后端的兼容性,比如服务端不存在DOM的问题)
服务端渲染的使用场景是什么?
SSR适用于强交互且注重SEO的页面
2.预渲染
什么是预渲染?
预渲染(Prerending)无需部署前端的服务器,即Node.js,
预渲染是指在构建页面时为了特性的路由,生成特性的静态页面,
从操作上来说,就是使用webpack插件将想要的页面组件在build时就预编译为html文件
然后直接以静态资源的形式输出给搜索引擎
它的特点是不执行JS,只适用于纯静态页面,难以加入交互机制(如:用户评价,提问等功能)
预渲染的优缺点是什么?
优点
- 有利于SEO(因为对搜索引擎爬虫来说不会等待JS执行完毕后才抓取数据,采用预渲染才能保证首次加载就有足够的HTML内容被获取到,影响搜索排名)
- 可以解决首页白屏问题
- 弱网体验好(因为Bundle足够小)
- 兼容浏览器(IE不支持某些高级特性,预渲染可以兼容"在执行JS时在浏览器页面显示异常"的情况)
缺点
- 更新页面的内容有难度(因为预渲染的构建是打包工具在打包时就渲染出来了,若不重新构建,-- 预渲染页面是保持不变的,即使页面数据已经刷新)
预渲染的使用场景是什么?
预渲染适用于只对少数几个网站进行SEO的网站
如:官网首页,营销页等等
3.服务端渲染和预渲染的异同
相同点
都是多页面,都可以根据客户端的url来返回相应的文件
不同点
预渲染的html文件在客户端生成,
服务器渲染的html文件在服务器生成
预渲染和服务器渲染的流程比较
预渲染的流程
举例来说,已经打包好的项目文件,其中包含不同路由生成对应的不同文件(比如路由文件A B C),放在服务端
假设客户端发送请求需要获取路由文件A,
流程如下:
- 服务器收到请求后将路由文件A发送给客户端
- 客户端生成一个无头浏览器(虚拟浏览器)
- 执行A文件中的JS文件,生成DOM元素以及获取内容,最终生成一个执行完毕的HTML文件
- 包含有内容和HTML结构的HTML文件交给真正的浏览器进行渲染
在上述流程中,倘若客户端发送获取路由文件A的请求时,携带了一个参数,
那么服务端收到该参数时,该参数并不能让服务器本身去执行文件,亦不能将参数代入到文件当中,只能把文件交给客户端
因此,预渲染并不能处理带有参数的路由,只能使用服务器渲染来处理
服务器渲染的流程
服务端渲染的流程如下:
- 客户端向服务器发送请求
- 服务器收到请求,直接在服务器中把文件执行完,生成最终的HTML文件
- 将HTML文件发给客户端
在上述流程中,由于是在服务端中直接执行并生成HTML文件的,因此接收到的客户端参数可以放在文件中执行
总结
预渲染的限制是:服务端上无法执行文件
改进方案:预渲染文件一开始就写好某个文件,可以引进某个文件以获取外部参数,
然后在服务端上吧参数放进指定文件中即可
4.参考博文
https://knife.blog.csdn.net/article/details/122485243
https://blog.csdn.net/m0_59795537/article/details/1232959