之前有用nuxt做过几个项目，整体还来说还不错用起来挺方便的，和vue差不多，最明显的地方是asyncData，有任何的ajax要在这个发起，深深的感叹nuxt的强大，配置项之多之便捷。
做过完项目后也有思考服务端渲染到底到底做了什么，node在服务端干了什么，之前查了些资料大概熟悉了下但没整理，今天来整理一次不然过段时间又把这事情忘了，其实了解后就会知道ssr没有想象的那么神秘。
主要内容有两点
第一点：只有用户第一次进来的页面也就是首屏是服务端node组装好的，其余页面还是走的SPA单页面模式，这样处理的结果是 既解决了首屏加速和seo的问题，又结合了SPA单页面的优势。
第二点：流程就是node组装好html返回 本地走vue单页面，重点是这两者怎么续上，第一个页面的数据怎么和后续页面的数据链接上，其实没有链接 html渲染一遍，单页面vue又渲染了一遍，走了两次渲染，数据使用的vuex store.replaceState() 数据链接是用的store的这个api 覆盖的 达到了无缝链接。
基本流程
服务端用node执行 监听端口 查看请求进来
监听 * 也就是该端口的所有请求
获取url 在express 的 res中 url 把路径传递给内部的vue
这里有个注意点 不能用hash模式 因为哈希模式# 后面的任何参数不会发送服务器，node也就无法感知到用户具体访问的是什么
node具体渲染vue 是吧vue的实例解读成 html 字符串 然后返回出去
完成这个过程的插件是 vue-server-render
首先用这个插件 创建一个 renderer实例 createRenderer() 此时可以设置模板 也可以设置缓存什么的
模板要有个注释 相当于占位符 渲染时会替换掉这个占位符位置
renderer.renderToString 这个函数接受 vue实例 和回调函数 回调函数会返回处理好的html 就这么简单 html 然后用express 把这个生成好的字符串返回出去就可以了 返回时可以额外的设置 返回的头什么
接下来的重点是这个vue实例怎么生成
这里有个注意点 无论是 vue 还是 vue-router 还是 vuex 都要用工厂模式 返回一个对象 这单和vue的data是函数 返回一个对象是一个道理每次都返回一个全新的实例 用户与用户之前的访问不会相互影响
正式文件的入口还是以前的main.js 这个js 如刚刚所说 改动下 导出一个函数 createApp 这个函数的执行结果是返回一个vue实例
在这层的基础之上额外的建立两个入口 一个是服务端引用的 一个是客户端引用的
服务端入口 返回一个Promise
接受上面说的 express中获得到的url 引用createApp 并执行 生成新的实例
调用app.router.getMatchedComponents 这个是返回当前路径下的所有组件
找出所有组件的目的是
1 如果组件数量为0可以返回404
2 找出所有组件的ajax请求 然后立即发起 发起就是Promise.all 执行完毕后一起返回
请求全部发起完毕后 获取 app.$store.state 把所有的store数据拿出来 挂在到context中 不挂也行反正能让 renderer那边拿到就行
这样app实例创建好了 可以传递给 renderToSring 进行转换了
转换成功 即将返回客户端时 把state 赋值到页面的全局变量中
并且在引入固定打包好的 服务端build文件 然后返回出去 这样服务端部分就做好了
客户端入口简单多了
调用createApp 生成实例 把实例 storoe,replaceState 覆盖即可完成联动
这是最基本的实现原理，实际运用时要优化的地方还有很多例如结合vueRouter meta实现动态的设置title 甚至是关键字 和描述词等，还有动态的热更新。
其实说到这里我有另一种想法。业务代码是业务代码，服务器运行的代码是一个壳子，本地开发是走SPA，线上走SSR。
有两种形式
第一 打包上传时上传两份，一份是一个固定名字的JS文件，这个JS是给首屏SSR固定引用用的，另一份是异步组件被分割的代码用于用户除首屏外的SPA用的。
第二 就打包一份正常被分割的代码，服务端那边麻烦一点嘛，node检索文件夹下面文件的名称匹配app.****.js的文件作为文件入口固定引用。
本片文章也就是处于好奇要自己实现一个SSR该怎么做的目的来写的，其实如果真的需要服务端渲染，还是会去使用nuxt来写，毕竟人家已经做得这么优秀了没理由拒绝。
网友评论