Vue客户端渲染和服务端渲染异同

前言

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

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

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

客户端渲染

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

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

Vue客户端渲染和服务端渲染异同

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

Vue客户端渲染和服务端渲染异同

服务端渲染

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

看一下服务端渲染的例子:

Vue客户端渲染和服务端渲染异同

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

Vue客户端渲染和服务端渲染异同

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

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

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

  • 更快的内容到达时间

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

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

服务端渲染会单纯的静态资源服务器相比,会损耗更多的CPU资源,所以设计好相应的缓存策略很重要,在使用服务端渲染前要考虑好是否真的需要进行服务端渲染。

版权声明:本文为CSDN博主「xubaodian」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:blog.csdn.net/u011350550/article/d...

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!