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

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

现在的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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3247

Web网页渲染的几种模式

本文主要内容来源于对上文的翻译,图也来源于此,加上了一点平时工作的理解,英语渣、翻译不是很准确,有条件的可以直接阅读上文链接。本文主要是自己在阅读时做的笔记,供自己以后查看。

Flutter 是如何渲染的?

要解答这个问题,首先需要认识到 Flutter 中有三棵树: Widget 树, Element 树和 RenderObject 树。当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget Tree ,同时与 Widget Tree 相对应

从浏览器渲染过程看重绘回流

浏览器渲染过程如下:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树。将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)。Layout(回流): 根据生成的渲染树,进行回流(Layout)

Vue中强制组件重新渲染的正确方法

有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的DOM,重新开始。那么,如何让Vue以正确的方式重新呈现组件呢?

vue数据渲染

vue 是如何将编译器中的代码转换为页面真实元素的?这个过程涉及到模板编译成 AST 语法树,AST 语法树构建渲染函数,渲染函数生成虚拟 dom,虚拟 dom 编译成真实 dom 这四个过程

reselect是怎样提升react组件渲染性能的?

reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染,功能有点类似于组件中的生命周期函数shouldComponentDidUpdate

web 前端页面的渲染(DOM)

CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。

在React中实现条件渲染的7种方法

借助React,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染。条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中,这是一种根据条件渲染不同元素或组件的方法

如何渲染几万条数据并不卡住界面?

如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。

CSS 渲染原理以及优化策略

提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk 2019 Programming Language Rankings 的时候,CSS 竟然排到了第七位。我们先来看看这张排行榜:

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

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

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