从壹开始前后端分离 [ Vue2.0+.NetCore2.1] 二十六║Client渲染、Server渲染知多少{补充}
<!DOCTYPE html><html lang=en><head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel=icon href=/favicon.ico> <title>blogvue3</title> <link href=/js/about.143cb27a.js rel=prefetch> <link href=/css/app.51e9ecbc.css rel=preload as= style> <link href=/css/chunk-vendors.5aa02cc7.css rel=preload as= style> <link href=/js/app.16d68887.js rel=preload as=script> <link href=/js/chunk-vendors.1c001ffe.js rel=preload as=script> <link href=/css/chunk-vendors.5aa02cc7.css rel=stylesheet> <link href=/css/app.51e9ecbc.css rel=stylesheet>//全部都是样式文件，可忽略研究</head><body> <noscript> <strong>We're sorry but blogvue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=app />//页面挂载入口 <script src=/js/chunk-vendors.1c001ffe.js />//vue 用到的区块文件，vue-cli全家桶默认配置里面这个chunk就是将所有从node_modules/里require(import)的依赖都打包到这里 <script src=/js/app.16d68887.js />//这个就是我们项目的核心内容，主要就是 app.vue 的内容，封装了所有方法，包括路由和页面渲染之类的</body></html>
大家观察生成的文件，只有一个div挂载入口，并没有多余的dom元素，那么页面要怎么呈现呢？答案是js append拼接，对，下面的那些 js 会负责innerHTML。而js是由浏览器解释执行的，所以呢，我们称之为浏览器渲染，相信这里大家应该很明白这个原理了，和我们平时用 jQuery 写局部异步加载是一样的，但是，这有几个致命的缺点：
- js放在dom结尾，如果js文件过大，那么必然造成页面阻塞。
- 随着我们的业务需求增大，打包后的 js 文件愈来愈大，页面白屏更加明显，用户体验明显不好，特别是首页，几个，几十个组件一起渲染，天讷！不敢相信
- 不利于SEO
- 客户端运行在老的JavaScript引擎上
这个时候，我们就想其他的一些办法，比如会单独给我们的首页写一个静态处理，为了应对相应速度，但是这个并不是一个好的办法，我们需要处理两套逻辑，基于以上的一些问题，服务端渲染呼之欲出....
总结：相信大家看到这里应该都能明白，客户端渲染的工作原理了，其实就是开发的时候组件化，然后通过 webpack 打包工具，将我们的逻辑处理 js ，打包成文件，然后和前端页面一起部署，这样就能讲数据在 DOM 上展示出来了。
二、Server 服务端渲染是怎样运行的
上边咱们看了客户端浏览器渲染，明白了原理和弊端，咱们这个时候就需要用到服务器渲染，SSR , Server Side Render的简称, 服务端渲染. 首先服务端渲染的思想由来已久, 在 ajax 兴起之前, 所有 web 应用都是服务端渲染, 服务器直接返回 html 文本给浏览器, 用户操作比如在登陆页面提交表单, 成功后跳转到首页, 服务器需要返回两个页面. 这样的弊端显而易见, 加大了服务器的消耗，到了 vue 时代，咱们虽然是通过 api 返回的Json，但是需要 node 服务器, 很耗费性能, 需要做好缓存和优化, 相当于空间换时间。
这里咱们先说下原理
从这个图里大家应该也能看到，我们的SSR打包流程变化了，在客户端渲染的时候，我们 webpack 是打包成js约束文件，直接发给浏览器，然后再获取数据渲染DOM，
网络解释有点儿羞涩难懂：ssr 有两个入口文件，client.js 和 server.js， 都包含了应用代码，webpack 通过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求之后，会创建一个渲染器 bundleRenderer，这个 bundleRenderer 会读取上面生成的 server bundle 文件，并且执行它的代码， 然后发送一个生成好的 html 到浏览器，等到客户端加载了 client bundle 之后，会和服务端生成的DOM 进行 Hydration(判断这个DOM 和自己即将生成的DOM 是否相同，如果相同就将客户端的vue实例挂载到这个DOM上， 否则会提示警告)。
可以看出来，我们增加了一个步骤：就是之前我们是在浏览器里，通过JavaScript框架来渲染数据的，但是现在我们的请求中间走了一遍 node 服务器，然后 node 服务器帮我们生成相应的 Html 片段，直接发送给浏览器，那浏览器肯定是认识html的，所以不用再通过 js 去获取数据渲染了，直接就渲染了，嗯大概就是这样，就好像多了一个中间件。
相信大家看内容可能不是很清楚，关键时候还是得上代码才能说的更清晰。
三、通过代码实现服务端渲染
客户端渲染咱们就不写代码了吧，这些天都写了很多了
1、首先我们新建一个文件夹 Vue_SSR_Demo 并对其 node 服务初始化
执行
npm install vue vue-server-renderer --save会看到生成一个 node_modules 文件夹 和 package-lock.json
