服务端渲染(SSR)原理和客户端(CSR)渲染区别
一、服务端渲染(SSR)是什么
服务端渲染简单来说就是:
用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件之后就可以直接解析展示了,这也就是所谓的服务器端渲染。
将组件或页面通过服务器生成HTML字符串,在发送到游览器,最后将静态标记 “混合”为客户端上完全交互的应用程序。
二、客户端渲染(CSR)是什么
客户端渲染简单来说就是:
随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,可能是添加更多功能的组件,复杂性更大,另外,此时 ajax 的兴起,使得页面就开始崇拜前后端分离的开发模式,即后端不提供完整的 html 页面,而是提供一些 api 使得前端可以获取 json 数据,然后前端拿到 json 数据之后再在前端进行 html 页面的拼接,然后展示在浏览器上,这就是所谓的客户端渲染
三、SSR的优势
服务器端渲染的优势就是容易 SEO,首屏加载快,因为客户端接收到的是完整的 HTML 页面。
利于SEO:不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本,使用了React或者其它MVVM框架之后,页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少(如图一)。另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬中就可以抓取到完整页面的信息。
首屏加载快:首页是通过node加载的HTML字符串,用户直接可以看到完整HTML,所以更快。
三、CSR的优势
节省后端资源,局部刷新页面,多端渲染,前后端分离。
1、节省后端资源。
即服务器端完成html模板的解析,如果请求较多,会对服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊了前端。
2、便于前后端分离。
前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板.
3、用户体验更好。
比如,我们将网站做成SPA或者部分内容做成SPA,这样,尤其是移动端,可以使体验更接近于原生app。
对比图![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ad0ac474687bef3fae599019ff6c4f5f.png#pic_center)
四、渲染过程
服务端渲染过程
客户端渲染过程
五、SSR的局限性
渲染过程由后端完成,会造成服务器压力较大、开发环境受限,服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,不利于前后端分离,开发效率低。
1、服务端压力较大
本来是通过客户端完成渲染,现在统一到服务端node服务去做。尤其是高并发访问的情况,会大量占用服务端CPU资源;
渲染过程在后端完成,那么肯定会耗费后端资源。费流量,即使局部页面的变化也需要重新发送整个页面。不利于前后端分离,开发效率低。
2、开发环境受限
在服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,因此项目引用的第三方的库也不可用其它生命周期钩子,这对引用库的选择产生了很大的限制;
六、CSR的局限性
首屏加载时间会比较慢、性能差,白屏,对于SEO无能为力、
1、前端响应较慢。
客户端渲染、由于页面显示过程要进行JS文件拉取和React代码执行,前端还需要进行拼接字符串的过程,需要耗费额外的时间,不如服务器渲染的速度快。
2、不利于SEO
对于SEO(Search Engine Optimazition,即搜索引擎优化),完全无能为力,因为搜索引擎爬虫只认识html结构的内容,而不能识别JS代码内容。
七,区别及适用场景
CSR和SSR最大的区别在于:
前者的页面渲染是JS负责进行的,而后者是服务器端直接返回HTML让浏览器直接渲染。
CSR和SSR重要的区别在于:
究竟是谁来完成html文件的完整拼接
适用场景
不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。
1、比如企业级网站,
主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;
2、类似后台管理页面,
交互性比较强,不需要seo的考虑,那么就可以使用客户端渲染。
3、具体使用何种渲染方法并不是绝对的
比如现在一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,这样就保证了渲染速度,而其他的页面采用客户端渲染,这样就完成了前后端分离。