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资源，所以设计好相应的缓存策略很重要，在使用服务端渲染前要考虑好是否真的需要进行服务端渲染。