VUE SSR 定制与使用心得（上）
引入 SSR 之前
在 SSR 之前，我们大部分的项目可以分为两种类型：
- 传统服务器渲染
- 纯前端渲染（如 SPA。以下 SPA 代指纯前端渲染项目）
SPA 对于前端的意义不必多说，他解决了前后端耦合的一大难题。但同时 SPA 确带来了不可避免的副作用：
- 首屏加载速度慢
- SEO 支持缺失
由此，我们迫切希望有一种方案可以同时兼顾传统服务器渲染和 SPA 的优势。
SSR 介绍
Server Side Rendering（简称 SSR）是近年来比较热门的词，它是继 SPA 之后前端的又一次提升。SPA 迈出了前后端分离的第一步，但同时也带来了一些副作用。而 SSR 的出现恰好弥补了 SPA 的不足，使得前后端分离真正可以达到和传统网站的效果并超越传统网站。
关于前后端分离以及 SPA 带来的好处大家可以自行了解，这里就不多说。SSR 相对于 SPA 主要有两点提升
更快的首屏展示速度
由于 SPA 需要先加载完 JavaScript 脚本才能开始渲染，所以首屏渲染并不快，在 JavaScript 加载中只能显示简单的等待画面。
SSR 是服务端渲染，可以直接输出 HTML 内容，在首屏展示上更有优势。
SEO 支持
SEO 的重要性大家都知道，因为 SEO 需求导致 SPA 对电商，首页，内容类网站等需要 SEO 的页面望而却步，只能回到传统服务端渲染的方案中。
SSR 弥补了 SEO 的不足，真正的可以通过前后端分离的方式完成此类网站。
阅读前提
这篇文章的读者需要对一些基础有一定的了解，一下是需要了解的内容
- 对 Vue 的使用有一定了解
- 对 Node 以及 koa 有一定了解
- 熟悉 webpack 并做过简单的配置
搭建雏形
首先您需要通过阅读 VUE SSR官方文档，跟随文档一步一步搭建了项目基本雏形。
假设您已经跟随官方文档搭建好了项目的雏形，现在需要回过头重新思考整个项目。下面是对您搭建项目的一个简单回顾。
实现效果
- 直接访问页面达到传统服务器渲染的速度
- 项目内跳转像 SPA 一样快速跳转
- 支持 SEO
- 同构代码，节省开发工作量，提升效率
- 前后端分离，可并行开发，独立管理
核心思路
- 输入地址访问或刷新访问时在 server 端渲染页面
- 浏览器中跳转时在 client 端渲染页面
- 前后端公用同一套业务代码
- 利用中间件，适配器以及环境判断屏蔽掉业务代码中的环境差异
目录结构
├── build – 构建相关, 包含 client 和 server 端的 webpack 配置
│ ├── webpack.base.js
│ ├── webpack.client.js
│ └── webpack.server.js
├── dist – 目标文件, 包括 server 端和 client 端
├── index.template.html – 通用 html 模板
├── package.json
├── process.json – pm2相关配置
├── server.js – server 端入口
├── src – 源文件
│ ├── app.js – 通用 app 入口
│ ├── app.vue – 入口 Vue 文件
│ ├── components – 页面组件
│ │ ├── index.vue
│ │ └── list.vue
│ ├── entry-client.js – client 端入口
│ ├── entry-server.js – server 端入口
│ ├── network – 网络
│ │ ├── api.js
│ │ └── index.js
│ ├── router.js – 路由配置
│ ├── store.js – store 配置
│ └── util.js
└── yarn.lock实现内容
* Vue 组件渲染
利用 vue-server-render 库, 可以对 vue 实例进行渲染输出 html
* Webpack 构建
对 server 和 client 代码进行构建, server 和 client 复用同一套 vue代码, 实现前后端同构渲染, 只是在 entry 部分有自己的特殊处理
server 端渲染以 bundle 的形式运行
client 端渲染出 js, css 等文件, 并输出 manifest
server 服务启动加载 server 端 bundle 和client 端 manifest , 自动处理异步模块, chunk 等, 生成 html
加入 less , sass, postcss , eslint, babel, uglify 等辅助插件
* Vue-router
前后端共用 router
前端在路由跳转时对比跳转前后两个页面的组件, 找出不同部分, 加载组件需要的数据, 完成跳转
同一个页面参数发生变更, 也会重新请求数据更新页面渲染
* Vuex
和渲染有关的数据都通过 vuex 保存, 前后端共享 store, 后端渲染界面, 并且把 store 的数据以 json 的形式放置到 html 代码中
* Title 设置
组件可以自定义 title 设置, 并且支持后端直接渲染到html和前端路由跳转切换
* 开发时注意
beforeCreate 和 created 在服务端也会执行, 不要放置对全局有影响的方法, 如 setTimeout
前端需要对 dom 操作的代码放在 beforeMount 和 mounted
深度定制
经过雏形的搭建，我们得到了一个简单的 Vue SSR 项目，并且了解到了 SSR 的实现原理。
接下来会对项目中的实现细节，和业务中常见的功能进行完善和补充。整个的完善将会从网络、缓存、开发体验等各个方面入手，目的是完成一个更加符合实际业务场景的框架。
这里先卖个关子，贴出来设计方案，给大家一个整体的印象(*^__^*) 。
目标以及主要做法
- 更快的显示速度 - 引入缓存
- 更好的开发体验 - hot reload
- 更方便的 API 使用 - mixin
- 更准确的网络请求 - ua，cookie 穿透
- 更完善的 SEO 配置 - vue-meta
- 更清晰的项目结构 - 模块化，职责拆分
设计方案总览
next...
下一篇将介绍完善的内容，文章将包含具体的做法，代码或者思路
