服务端渲染和客户端渲染:CSR和SSR

时间: 2019-05-08阅读: 191标签: 渲染

现在的web网站都是非常讲究用户体验,一般都会采用服务端渲染加客户端渲染一起实现功能。服务端渲染有利于搜索引擎优化(SEO),利于被网页爬虫抓取数据,多见于电商网站商品信息获取等。客户端渲染不利于搜索引擎优化,网页数据异步获取,首页加载时间长,用户体验相对较好,常用于不需要对SEO友好的地方。


服务端渲染(SSR)

简单理解就是浏览器发送请求后,服务器把客户端网页和数据在后台渲染解析,之后把渲染后的结果返回客户端。

客户端拿到的是渲染后的结果,可以直接展示。服务器端渲染的页面在网络中传输的时候,传输的是一个真实的页面。因此,爬虫客户端当爬到我们的页面后,会分系我们给他提供的这个页面,此时,我们页面中的关键数据就会被爬虫给收录了。服务端渲染可以解决首页白屏时间过久,但是也容易导致服务器压力大,因此,可以使用服务器端的页面缓存技术,减轻服务器的渲染压力。


客户端渲染(CSR)

在当今SPA框架,Vue,React,Angular大行天下的时候,前后端分离开发异常可见。客户端渲染简单理解就是浏览器发送页面请求,服务器返回的是一个模板页面,浏览器从上至下解析过程中需要发送ajax请求获取数据,最后再调用模板引擎(art-template等)渲染HTML结构,并把渲染后的结果添加到页面指定容器中。

客户端渲染因为数据是异步获取,所以在展示完整页面的过程中最少发起两次请求,数据是动态的添加到页面中,因此,非常不利于SEO,便于前后端分离开发。现如今前端采用Vue等框架开发非常多见,因此为了解决纯客户端渲染面临的问题,很多类似Vue中使用SSR和前后端同构的思想也非常常见。


小技巧

如何在页面中快速的判断到底那些是服务端渲染,那些是客户端渲染?

鼠标右键查看源代码,在页面中看到的内容在源代码中也可以查看到,则是服务端渲染得到的。
鼠标右键查看源代码,页面中看到的内容在源代码中不可以查看到,则是客户端渲染得到的。


原文:https://github.com/pubdreamcc/Node.js/blob/master/第三章/服务端渲染和客户端渲染.md


CSS加载会阻塞DOM树的解析和渲染吗?

css加载不会阻塞DOM树的解析 ; css加载会阻塞DOM树的渲染 ;css加载会阻塞后面js语句的执行,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度

页面需要渲染10万条数据,应该怎么实现?

设置总数据源,页面内容数据存储容器,制定页面内容数据存储容器规则。用户滑到地6屏数据的时候,显然前面5屏数据不在可视窗口,那你可以将存储容器的前3屏数据删除。同时,再从总数据源取第11屏到第13屏数据。

用 node.js 模仿 Apache 的部分功能

首先,这个例子用到了服务端渲染的技术。服务端渲染,说白了就是在服务端使用模板引擎,这里我先简单的介绍一下服务端渲染与客户端渲染之间的区别

细说 Vue 组件的服务器端渲染

现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React、Vue 等组件技术的发展,更是使这种方式深入人心。

vue 修改变量值无法渲染到页面

开发中碰到这么个问题,修改对象中的属性无法渲染页面。直接操作ccc变量就是没问题的。直接贴我的代码。解决方法一:注意,第二个参数是字符串类型,切记。

Vue.js中v-html渲染的dom添加scoped的样式

在vue.js中,要将一段字符串渲染成html,可以使用v-html指令。但是 官方文档 中的v-html部分也提醒了

react 异步加载数据时的渲染问题

当数据需要异步加载时render获取不到数据可能会报一些错误,此时需要在render函数中加一个判断.行到render时,state对象的haveData为false, 所以此时页面展示 loading,当异步获取数据成功时

Web渲染那些事儿

在决定渲染方式时,需要测量和理解真正的瓶颈在哪里。静态渲染或服务器渲染在多数情况都比较适用,尤其是可交互性对JS依赖较低的场景。下面是一张便捷的信息图,显示了服务器到客户端的技术频谱:

vue从后台获取数据赋值给data,如何渲染更细视图

如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。官网API是这样介绍的:Vue.set(target,key,value)

Vue渲染数据理解以及Vue指令

原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏览器的重绘和回流),Vue是一个mvvm框架(库),大幅度减少了DOM操作

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全