精华内容
下载资源
问答
  • 参考链接:客户端渲染和服务端渲染的区别https://blog.csdn.net/qq_40885461/article/details/88539989 浅谈服务端渲染(SSR)https://www.jianshu.com/p/10b6074d772c 客户端渲染 在服务端Server放了一个HTML页面...

    参考链接:客户端渲染和服务端渲染的区别https://blog.csdn.net/qq_40885461/article/details/88539989

                      浅谈服务端渲染(SSR)https://www.jianshu.com/p/10b6074d772c

    客户端渲染

    在服务端Server放了一个HTML页面,客户端发送请求,服务端将页面给客户端,客户端在收到服务端响应的字符串后,然后浏览器从上到下依次解析,在解析过程中,如果发现ajax请求,则再次发起新的请求,拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中,第一次请求拿到的是页面,第二次请求拿到的是动态数据。总的来说,客户端渲染页面加载速度快,但是数据加载缓慢。

                                         

    利:

    • 前后端分离,前端专注于UI,后端专注于逻辑;
    • 局部刷新,无需每次请求完整页面,体验更好;
    • 节省服务器性能,部署简单;
    • 交互性好,可以实现各种效果。

    弊:

    • SEO问题,爬虫看不到完整的呈现源码;
    • 首屏渲染慢,渲染前,需要下载一堆js和css文件;
    • 耗电

    服务端渲染(SSR:server side render)

    在服务端使用模板引擎,模板引擎最早诞生于服务端,后来才发展到了前端。浏览器向服务端发起一个页面请求,实际上服务端响应浏览器的请求前已经将页面和数据渲染完成。因此,服务端渲染,响应的就是最终的结果,在客户端不需要再做任何处理。一次请求就可以完成渲染,因此服务端渲染比客户端渲染更快。

                                       

    举个商品列表页面为例子:

    前端渲染:说的应该是刚进入页面时,商品列表这些数据都不给你,不会渲染出这些数据。然后加载script时,再用ajax或者fetch之类的发起了请求另一个接口,服务端返回了商品列表的json数据给你,你在js中用模板引擎之类的技术,把这些数据拼成html字符串插入到Dom里。

    服务端渲染:服务端用php的smarty模板或者java的jsp,把页面的商品列表信息渲染出来了,返回一个html给浏览器了。

    利:

    • 首屏渲染快,客户端只负责解析html;
    • 利于SEO;
    • 可以生成缓存片段,生成静态化文件;
    • 节能

    弊:

    • 用户体验较差;
    • 不容易维护,通常修改了部分html或者css,后端也需要改

     

    展开全文
  • Vue客户端渲染和服务端渲染异同

    千次阅读 2018-09-20 18:15:18
    本文比较服务端和客户端渲染的不同,并用实例验证,同时会讲解一些Vue服务端渲染的概念。 本文不讲Vue服务端渲染的具体实现过程,需要学习服务端渲染的同学可以异步Vue服务端渲染官方教程地址: ...

    本文比较服务端和客户端渲染的不同,并用实例验证,同时会讲解一些Vue服务端渲染的概念。

    本文不讲Vue服务端渲染的具体实现过程,需要学习服务端渲染的同学可以异步Vue服务端渲染官方教程地址: https://ssr.vuejs.org/,相信会比一般博客讲的更为清楚。官方教程同时也提供了Demo,地址如下:https://github.com/vuejs/vue-hackernews-2.0/ ,该demo功能齐全,需要的小伙伴可以直接clone下来使用。

    如果想要使用更高层的服务渲染框架,可以了解下Nuxt.js,连接地址如下:https://nuxtjs.org/ 。上面几个地址相信对想要学习或了解Vue服务端渲染的同学很有帮助,下面就开始讲下Vue客户端渲染和服务端渲染的异同和一些概念。

    1、客户端渲染。

    Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。什么意思呢?就是我们的页面开始是没内容的,加载js后,js会生成和操纵dom,最后又浏览器渲染出页面。这一系列的操作都是在浏览器完成的。

    看下实例:Vue客户端应用加载时如下:


    url(http://localhost:8080/#/) 加载出来的是一个空的页面,该页面加载了app.js这个文件,该js文件会产生和操作Dom,最终浏览器渲染和绘制页面。最终页面如下:

    2、服务端渲染

    服务端渲染其实很好理解,浏览器请求的页面就是服务器渲染好的。在前后端不分离的时代(现在依然有很多公司这样做),很多同学应该都知道Freemarker等模板,就是将页面中的变量替换成实际数据之后,再交给浏览器渲染。
    看一下服务端渲染的例子:

    很明显,客户端接收的文件是服务端已经渲染过的,即url(http://localhost:8080/user/123) 获取的已经是一个可展现的页面,这点就是服务端和客户端渲染的最大区别。服务端渲染的结果如下:

    既然可以在客户端渲染,为什么还要有服务端渲染呢,进行服务端渲染一般会有下年几方面原因:

    • 更好的SEO(搜索引擎优化,即让搜索引擎能多的搜索网站)

      现在,大部分搜索引擎都已经能够索引同步JavaScript程序或应用,注意是同步。如果网站通过Ajax异步加载内容,并渲染到页面上,搜索引擎是无法感知的,所以这个时候服务端渲染时一个更好的选择。
    • 更快的内容到达时间

      在网速比较慢,设备性能比较低时,使用服务端渲染是一个比较好的选择,服务端把完整的页面交给浏览器,浏览器只需渲染即可。从用户体验的角度考虑,这时服务端渲染是一个更好的选择。

      当然可能还包括,开发条件受限,有些类库必须使用服务渲染。一些安装部署的特殊要求等等。

      服务端渲染会单纯的静态资源服务器相比,会损耗更多的CPU资源,所以设计好相应的缓存策略很重要,在使用服务端渲染前要考虑好是否真的需要进行服务端渲染。
    展开全文
  • 服务端渲染和客户端渲染的区别 + 客户端渲染不利于 SEO 搜索引擎优化 + 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的 + 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的 + ...

    服务端渲染和客户端渲染的区别
    + 客户端渲染不利于 SEO 搜索引擎优化
    + 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的
    + 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的
    + 而是两者结合来做的
    + 例如京东的商品列表就采用的是服务端渲染,目的了为了 SEO 搜索引擎优化
    + 而它的商品评论列表为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染

    判断服务端还是客户端:

    1. 服务端是直接返回html代码,所以可以在检查源代码中可以看到所有的html代码
    2. 客户端渲染是异步,所以不会在检查源代码中看到输出的文字
    展开全文
  • 传统的页面渲染只有客户端和服务端,由客户端服务端发送url请求,服务端返回一个静态页面。整个解析过程由服务端完成,服务端解析渲染页面的优点是解析速度慢,但是用户体验不好,因为每次用户有新的请求都会重新...

            传统的页面渲染只有客户端和服务端,由客户端想服务端发送url请求,服务端返回一个静态页面。整个解析过程由服务端完成,服务端解析渲染页面的优点是解析速度慢,但是用户体验不好,因为每次用户有新的请求都会重新请求服务端更新页面。

            之后流行了SPA单页面,前端路由,由客户端请求服务端,服务端仅返回.html js css部分,再由客户端进行渲染页面。这样用户更新的时候不再不再刷新页面,增强了用户体验感,但是用户端渲染页面速度很慢。        

    ·        jquery+ajax创建的单页面项目可以先由浏览器渲染首页再由客户端渲染之后的页面,提高了渲染速度和用户体验感。

            Vue创建的也是单页面项目,用户请求url时服务端返回一个空白的html,再由Vue渲染到页面上。

     这几种方式各有优缺点,所以出现了同构渲染,由服务端先通过服务端渲染(server-side rendering,下称ssr),生成html以及初始化数据,客户端拿到代码和初始化数据后,通过对html的dom进行patch和事件绑定对dom进行客户端激活(client-side hydration,下称csh),这个整体的过程叫同构渲染,解决了客户端渲染慢以及首屏喧染慢的问题。

    展开全文
  • Vue服务端渲染和客户端渲染

    千次阅读 2019-08-09 18:23:36
    一、前言 主要涉及: 1、什么是服务端渲染 2、什么是客户端渲染 3、两者的区别,以及什么场合使用 二、主要内...
  • (一)客户端渲染 页面的渲染工作都是由浏览器来完成的,服务器只是负责提供数据。前端去后端取数据生成DOM树。 **最少两次请求 ** 第一次请求拿到的是页面 第二次请求拿到的是动态数据 步骤 1、收到服务端响应的...
  • 关于服务端渲染客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解。 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
  • 客户端渲染:在服务端放了一个html 页面,里面有<script>//发请求,拿数据,模版引擎渲染等,$.ajax ,</script>...过程至少服务端发起两次请求服务端渲染:sever...
  • 要想对比服务端渲染和客户端渲染首先要知道它们的概念? 什么是服务端渲染? 我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html 的内容,这个过程就是服务端...
  • 一、客户端渲染(CSR) 1-1、渲染步骤 客户端渲染主要有以下三个步骤: ... ... ... 4、浏览器渲染并显示页面内容。...1、由于需要加载js文件以及后台接口数据,所以首屏加载时间会比较长,用户体验...二、服务端渲染(SSR) 服务端
  • 首先什么是服务端渲染? 我们先用 node 启动一个 express 服务。 当启动这个服务后,我们打开 localhost:3000 可以看到页面已经显示出来hello world,而且我们可以打开页面的源代码,可以发现页面的源码也可以看到...
  • 客户端渲染和服务端渲染的区别 客户端渲染(BSR) 前端利用ajax等数据交互手段获取服务端提供的数据之后,渲染到HTML页面。 方法:(ajax、jsonp、fetch)=> 获取数据 => 文档碎片插入,拼接字符串,模板引擎...
  • SPA、SEO、SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案。 优点:页面之间切换快;减少了服务器压力;...并且有一些搜索引擎不支持的 js 通过 ..
  • 客户端渲染 1、第一次请求的是页面(字符串) 2、第二次请求的是接口数据
  • 客户端和服务端的关系

    万次阅读 多人点赞 2018-01-09 18:59:12
    客户端和服务端的关系  很多人在学习编程的时候并不知道客户端和服务端的关系,今天就让我给你用一个打比方的方法为你解说一下客户端和服务端之间的秘密。  我在大学喜欢去清蒸餐厅吃饭,因为比较近,那我...
  • 什么是服务端渲染? 我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html 的内容,servlet在服务端生成html的过程就是服务端渲染,如下图: 服务端渲染的特点...
  • 服务端渲染和客户端渲染本质都是字符串拼接; 服务端渲染:在客户端发起请求后,在服务端把数据查询的结果嵌套在html,然后把整个包发给客户端进行渲染,这当中只会有一次请求。 客户端渲染:在客户端发起请求后,...
  • NuxtJS学习 服务端渲染客户端渲染比较 一、客户端渲染 1、客户端渲染流程 a、客户端通过AJAX向服务端(servlet)发送http请求数据接口。 b、服务端(servlet)将获取的接口数据封装成json,响应给客户端。 c、客户端拿...
  • 1.服务端渲染: 在服务器直接生产渲染好的对应的HTML页面,返回给客户端进行展示 后端路由:后端处理URL页面之间的映射关系,当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个...
  • SSR(Server Side Render)...web开发者对于vue,react,angular这样的前端框架肯定并不陌生,近些年大火的vuereact不约而同的使用了Virtual DOM,其核心做法是将网页内容通过js动态挂载到页面中,这就是客户端..
  • 一、服务端渲染(SSR)是什么 用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件之后就可以直接解析展示...
  • 之所以选择服务器端渲染,主要出于以下两点考虑: 能够为客户提供更理想的性能 提供更为一致的SEO表现 正是由于SSR拥有上述优势,因此我们在将自有堆栈转换为React与Node.js时,投入了大量时间与...
  • Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候,一直苦于产品、...
  • 拉勾教育前端高薪训练营 SPA单页面应用 优点 用户体验好 开发效率高 渲染性能好 可维护性好 缺点 需等待客户端js解析执行完,造成首屏渲染时间长 单页面的html是没有内容的,不利于SEO 传统服务端渲染 客户端 服务端...
  • 一、前言 主要涉及: 1、什么是服务端渲染 2、什么是客户端渲染 3、两者的区别,以及什么场合使用 二、主要内...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,376
精华内容 18,150
关键字:

客户端和服务端渲染