手把手教你 Vue 服务端渲染

写在前面

在写这篇文章以前，我有写一篇 Vue 预渲染的教程 以及 在线示例，有须要的能够看一下~

---

【下面开始 Vue 服务端渲染】

服务端渲染 = SSR = Server-Side Rendering

Vue 服务器渲染 能够说是咱们学习 Vue 技术的最后一个环节了；也是上手难度稍为高一点的一个环节。

目前尚未发现很好的学习资料或者教程，文档也不是特别明白，这也致使了不少人没能拿下 vue 的 ssr。

因此就想着写一个曲线平滑，按部就班，明了易懂的 教程 来帮助你们找到 Vue SSR 的感受。

导读

因为内容较多，若是只写一篇文章就想把 Vue SSR 介绍清晰透彻的话，我以为不太现实；因此就想着把一个完整的 Vue SSR 项目细分开来，每个小节讲解一个知识点，这样效果应该会好一点吧。这个项目虽然不大，但已经包含了 Vue SSR 的全部内容。

项目仓库：github.com/Neveryu/vue…

一、这个教程 分为 7 个小节，每一个小节都是一个独立的能够运行的小项目，这样能够减小你们出错的几率（若是只给出最终的代码，那万一又跑不起来，岂不凉凉，影响你们学习的心情）；每一个小节简单配备了 运行步骤 以及 简要说明 来帮助你们运行项目以及了解本节的知识点。

二、其次，每一个小节都是在前一小节的基础上，继续补充写代码的，这样，你们对比就能知道，这一节具体增长了哪些代码，哪些内容；方便你们学习某一个小节的知识（若是笼统的一次性给出最终代码，这样在找代码之间逻辑关系时，比较吃力）

章节介绍

第一节：一个最简单的服务端渲染原型（10 行代码）【难度：★】

第二节：与服务器集成，使用 Express 做为服务器提供服务【难度：★】

第三节：使用一个页面模版【难度：★】

第四节：开发客户端与服务端入口文件，配置webpack【难度：★★★】

第五节：使用vue-router来作路由【难度：★★】

第六节：数据，vuex，状态容器【难度：★★★★★】

第七节：增长一些额外的功能，完善项目【难度：★★】

如何学习

• 一、建议你先看一遍 Vue SSR 的文档，看不懂的地方不要慌，留个印象也行
• 二、学习 这个课程 的时候，打开 Vue SSR 的文档；找到当前这一小节对应文档中的文字介绍部分
• 三、若是你基础有点薄弱的话，不要太过于着急
• 四、不能保证全部人看一遍就能学会，可是能保证全部人，两遍应该没问题
• 五、若是你能跟着动手敲的话，将会事半功倍

知识点

一、避免单例状态 在 app.js 中，暴露一个能够重复执行的工厂函数，为每一个请求建立新的应用程序实例。

相关文档

二、配置webpack webpack 配置文件包含：基本配置(base config)、客户端配置(client config)、服务器配置(server config)。 基本配置包含两个环境（客户端环境，服务器环境）共享的配置；而后客户端配置和服务器配置都会经过使用 webpack-merge 来简单的扩展基本配置。

相关文档

教程中的 webpack 相关的配置已经配置好了，你能够直接所有拿过来用就好了

三、createBundleRenderer 咱们在前三节使用的都是 vue-server-renderer 中的 createRenderer 方法；从第四节开始，咱们使用的是 createBundleRenderer，所建立的 bundle renderer，用法和普通 renderer 相同。 createBundleRenderer 接收一个 server bundle 生成的特殊 JSON 文件。可是 bundle renderer 提供如下优势：

• 内置的 source map 支持（在 webpack 配置中使用 devtool: 'source-map'）
• 在开发环境甚至部署过程当中热重载（经过读取更新后的 bundle，而后从新建立 renderer 实例）
• 关键 CSS(critical CSS) 注入（在使用 *.vue 文件时）：自动内联在渲染过程当中用到的组件所需的 CSS。更多细节请查看 CSS 章节。
• 使用 clientManifest 进行资源注入：自动推断出最佳的预加载(preload)和预取(prefetch)指令，以及初始渲染所需的代码分割 chunk。

相关文档

Vue SSR 性能

从原理上来讲，Vue SSR 确定要比纯字符串模板渲染要慢，而从数据来看，也能证实这一点（经过压力测试，发现 Vue SSR 很快会出现时间瓶颈）。

查看 vue-server-renderer 源码发现 Vue SSR 是使用了 vm 作沙盒来运行 render 部分代码，起到隔离 server 环境的目的，而 vm 的 context 回收可能存在问题，存在必定的内存泄漏。

至于官方提到提升性能的方式有一种方式是组件缓存，咱们增长组件的 servercachekey 以后发现内存回收更加频繁，多是由于 lru-cache 自己就是内存缓存，占用内存。

交流

项目仓库：github.com/Neveryu/vue…

固然，若是你有任何建议或者疑问，欢迎经过各类方式与我联系~谢谢！

写在最后

个人主页： neveryu.github.io/index.html

QQ群：685486827