简介
说明
本文介绍Vue项目实现服务端渲染（SSR）的解决方案。
什么是服务端渲染(SSR)？为什么要使用服务端渲染？服务端渲染、预渲染、客户端渲染有什么区别？
官网
方案简介
有三个方案可以实现Vue的SSR：Vue官方方案、Nust.js、Quasar Framework SSR + PWA。
这三者之间的对比如下：
项 | Vue官方方案 | Nust.js | Quasar Framework SSR + PWA |
对Vue项目改动大小 | 很小 | 很大。 基本需要重新写 | 较小 |
推荐度 | 最推荐 |
方案1：Vue官方方案
说明
本方案需要最低为如下版本的 Vue，以及以下 library 支持：
vue & vue-server-renderer 2.3.0+
vue-router 2.5.0+
vue-loader 12.0.0+ & vue-style-loader 3.0.0+
官网
方案2：Nust.js
说明
Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。
官网
方案3：Quasar Framework SSR + PWA
说明
Quasar Framework 可以通过其构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用，让你的想法的设计和构建变得轻而易举。
Quasar 是一个基于 Node.js 和 webpack 的开发环境，它可以通过一套代码完成 SPA、PWA、SSR、Electron、Capacitor 和 Cordova 应用的快速开发。
官网
Vue官方方案详解
- vue中的生命周期钩子函数中，只有beforeCreate与created会在ssr中调用（因为没有动态更新）
- 像定时器的timer，在客户端里，可以在组件销毁的时候讲timer销毁，但是在服务器中，由于没有destroy，那么这个timer会一直存在。
- 服务器端与客户端的相应的API是不同的
- 可以将平台特定实现包含在通用api中。
- 如果一些自定义指令直接操作dom，那么在ssr中可能报错。
- 可以抽象为组件，运行在虚拟DOM级别，或者在创建服务器renderer时，使用directive选项提供服务器端版本
- 如何将相同的vue应用程序提供给客户端？
- 需要使用webpack打包vue应用。
- vue通常由webpack和vue-loader构建，但是许多webpack特定功能不能直接在node.js中使用（如file-loader导入文件）
- 对于客户端代码，需要使用babel转换es6代码
- 解决： 对于客户端与服务器端程序，都需要webpack打包。会产生服务器端与客户端版本
- 代码分割
- 应用程序的代码分割与异步加载，可以改善体积bundle的可交互时间。 对于初始屏来讲，可以“只加载所需”。
- vue可以 使用 const Foo = () => import('./Foo.vue')类似的方式来加载异步组件。//在vue2.5UI下，服务端渲染一部组件只能在路由组件，而2.5+以上异步组件可以在任何地方使用。不过依然需要在挂载app之前调用router
