前一段韶光看网友谈论的 为什么现在又盛行做事端渲染html？ ，关于现在的ssr的态度也是各有褒贬。但是不容置疑的是，SSR作为新的涌现，是由于在SPA（Single-Page Application – 单页运用程序）盛行之后，紧张是办理前端开拓措辞来办理SPA涌现问题的进一步办理方案。
吐槽：这几年刚刚开始盛行的SPA还没开始学呢，现在已经变成了传统的了，至心是学不动啊！
传统SPA运用的优点是前后端分离，后端只卖力供应数据，前端加载完之后体验良好，内容改变不须要加载全部页面，缓存数据，减少做事器压力，提高性能。这么牛，怎么会又缺陷！
！
！
SPA事情的流程是第一次将所有须要的前端搭建的构建脚本资源文件全部下载下来，然后运行脚本异步加载数据，渲染页面，也正是这种特性造成的结果：
首屏慢：第一次加载所有资源，然后才开始实行，那实行到这里优化不好的话，已经是几秒十几秒往后了。SEO优化差：搜索引擎爬虫爬到这里是空的！空的！
搜索引擎抓取的时候是不实行js脚本就跟谈不上什么异步要求了，当然Google最新技能在支持，但是什么时候用上呢？不能刷新：利用vue之后你会创造，好多页面刷新就意味着页面数据全部消逝，提高后对都是消逝，就须要自行编写提高后真个逻辑了。页脸庞杂度成倍提高，前端开拓的哀求提高。
这里提醒有些利用VUE开拓管理平台的同学，面对业务提出要打开独立页面的需求的话，一定要用多tab的框架，不然用openwin的办理方案的话，每次打开新窗口都是首屏，都要加载会很慢的。
这时候就开始返回来去做事端渲染页面的技能来了。也是之前jsp php .net 之类的一贯干的事儿，一样是模板引擎。只不过后端措辞变成js，并且也利用模板引擎，vue的ssr也算是一种吧。ssr的涌现便是为理解决上面提到的spa运用中的seo问题和首屏加载问题。
有舍必有得，SPA为追求极致性能产生，SSR为办理SPA的问题产生，也就丢失了追求极致的问题。SSR须要占用做事器资源处理模板引擎来产生数据，势必造成做事器压力变大。做事器版本也不是纯挚的只要能下载静态资源就行了，现在须要利用nodejs server环境了。是否真有必要上这个东西就要自行取舍了。
在之前的谈论帖中，有童鞋说该当搜索引擎来提高技能，这个呢Google虽然已经在做了，但是这个对搜索爬虫哀求提升的可不是一个量级，Google也只是在小范围内在测试利用。至于百度，呵呵，他什么时候关注过为客户打好广告之外的事情呢？
基本利用与安装先建立文件夹，新建server.js文件，内容是 根目录新建server.js文件，写入代码
const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('', (req, res) => { const app = new Vue({ data: { url: req.url }, template: `<div>The website you visit is: {{ url }}</div>` }) renderer.renderToString(app, (err, html) => { if (err) { res.status(500).end('Internal Server Error') return } res.end(` <!DOCTYPE html> <html lang=\"大众zh\"大众> <head><title>Hello</title></head> <body>${html}</body> </html> `) })})server.listen(8080,() => { console.log('做事器已启动！
')})
然后开始项目初始化及包安装
npm init //初始化项目npm install vue //安装vue根本包npm install express //安装做事器环境包npm install vue-server-renderer //安装做事器渲染包node server //安装包结束之后运行做事器
node server运行显示做事器已启动，就可以访问http://localhost:8080/ ，就可以显示内容了。而且呢，地址后面不管你输入啥，都是访问这个页面。
这时候打开谷歌浏览器的开拓者工具查看 并且打开谷歌浏览器的开拓者工具，查看Network => Doc => localhost => Response, 创造吸收到的实在彷佛已经是编译好的结果。
看上面的server.js代码，ssr的核心实在vue-server-renderer组件中renderToString，他将APP组件里面的内容编译后写入到输出模块里面。
页面模板和模板插值上面只是大略的将组件末了插入，再来一个提前写好模板，然后在createRenderer()的时候就将模板写好。先写一个模板文件 index.tpl.html
<!DOCTYPE html><html lang=\"大众en\公众> <meta charset=\公众utf-8\"大众> <title>{{ title }}</title> {{{ meta }}} <body> <!--vue-ssr-outlet--> </body></html>
在这个模板中 双括号{{}} 是进行 HTML 转义插值，三括号{{{}}}是不进行HTML转义的插值，< !–vue-ssr-outlet– > 标签是对应组件输出的位置。
根目录的server.js文件内容对应的变更为
const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer({ template: require('fs').readFileSync('./index.tpl.html', 'utf-8')})server.get('', (req, res) => { const app = new Vue({ data: { url: req.url }, template: `<div>The website you visit is: {{ url }}</div>` }) const context = { title: 'hello', meta: ` <meta ...> <meta ...> ` } renderer.renderToString(app, context,(err, html) => { console.log(html) })})server.listen(8080,() => { console.log('做事器已启动！
')})
然后重新运行下npm run server/node server。重新访问链接对应的内容就发生了变革。
当然，个中模板填入的参数值不仅仅可以通过renderToString的第二个参数传进入，也可以与 Vue 运用程序实例共享 context 工具，许可模板插值中的组件动态地注册数据。
做事端代码的局限性由于ssr是在用户访问阶段做事端直接渲染初始代码到客户端，为了降落最做事器的占用，相应式的数据特性就被禁用掉了。这样就产生了做事端vue组件代码和其他代码开拓中的差别：
生命周期钩子仅beforeCreate 和created 生效，其他只在客户端运行。把稳避免原来created周期新建，destroyed 周期销毁之类的副浸染代码的产生。操作windows和document的代码会在做事端报错抛出。把稳利用干系第三方库（library）涉及以上API的问题自定义指令大多数都是直接操作dom，也会出错避免单例模式造成的要求交叉污染碰着干系问题，可以自行查阅处理方案。
文末当然，本文只起到理解观点入门的地步。真的须要又兴趣或者业务须要，建议直接辞官网通读官网的教程，一定更有收成。当然也可以灵巧利用，根据自己的业务须要引入redis，serverfetch之类的技能，让首屏速率及seo能提升到10ms以内，也不是不可能的。
