使用Vue + Koa搭建服务端渲染 (项目使用包管理工具yarn)

服务端渲染简介:
客户端渲染不利于SEO优化
服务端渲染是可以被爬虫抓取到的，客户端异步渲染则难以被爬虫抓取
SSR直接将渲染好的html字符传递给浏览器， 大大加快了首屏加载的时间
SSR会占用服务端更多的CPU和内存资源
一些常见的浏览器API将无法正常使用
在Vue中支持beforeCreate和created两个生命周期

1. 安装服务端koa依赖: yarn add koa koa-router koa-static

2. 安装vue相关的依赖: yarn add vue vue-router vue-server-renderer

3. 初始化koa服务;

const Koa = require("koa")
const Router = require("koa-router")
const Static = require("koa-static")const app = new Koa();
const router = new Router()router.get("*", ctx => {ctx.body = 'hello world'
})
app.use(router.routes());
app.listen(3000)

4. 在服务中引入vue相关的依赖,同时创建vue实例和创建vue的一个渲染器

const Vue = require("vue")
// 关于vueServerRender; 这是Vue提供的专门用于服务端渲染处理的包
const VueServerRender = require("vue-server-renderer")
// new 一个vue的实例：
const vm = new Vue({data() {return { msg: "hello 2" }},template: `<div>{{msg}}</div>`
})
// 创建一个渲染器
let render = VueServerRender.createRenderer()

5. 使用渲染器在路由中渲染Vue实例进行返回:

// 渲染器的renderToString方法可以将一个Vue实例渲染为html字符串，这是一个异步的方法，需要使用async和await
router.get("/", async ctx => {ctx.body = await render.renderToString(vm)
})

6. 构建网页html模板:

/*** 1. 创建一个template.html的文件(文件名随意)* 2. 在html文件的body中添加一个 <--vue-ssr-outlet-->,它有点类似于vue-router在html中添加的<router-view>占位符，之后渲染时这个地方就将会被替换成渲染出的html字符串* 3. 在server.js服务文件(就是创建koa app实例的文件)中读取这个html文件的内容，然后作为参数传递给VueServerRender.createRenderer()；这里的意思是vue-server-renderer将会使用哪个模板进行渲染。注意这里需要读取出模板字符串传递给它，而不是模板的路径*/
const fs = require("fs")
// 读取出html模板
const template = fs.readFileSync("./template.html", "utf8");
// 创建一个渲染器
let render = VueServerRender.createRenderer({template
})

7. 文件拆分: 按照Vue-cli构建vue项目的样子，拆分出Vue的相关文件放到src目录下,将需要渲染的html文件放到public文件下(实际基本和Vue-cli创建的形式差不多)

/***  7.1 创建src目录和public目录，src目录下创建main.js文件，App.vue文件，components组件文件夹,在public目录下创建一个index.html文件，并在其body中添加一个id为app的div容器*//*** 7.2 main.js文件：*/
import Vue from "vue"
import App from "./App";//  提供Vue的实例: 使用一个工厂的形式产生Vue实例
// 这样的好处是在服务端渲染的时候使得每个客户端都可以获得一个独立的vue实例，而不至于造成同一个vue实例多个用户的问题
export default () => {const app = new Vue({render: h => h(App)})return { app }
}
/*** App.vue文件(其实就是基本的App.vue文件)*/
<template><div>App.Vue<Bar /></div>
</template>
<script>import Bar from "./components/Bar";export default {components: {Bar}};
</script>

8. 安装配置webpack用于打包客户端的代码，及刚创建的src下的内容打包为client代码用于后续处理:

工具安装:
yarn add webpack webpack-cli webpack-dev-server babel-loader @babel/preset-env @babel/core vue-style-loader css-loader vue-loader vue-template-compiler html-webpack-plugin webpack-merge
工具简单说明:
webpack: webpack打包文件
webpack-cli: webpack命令行解析工具，处理webpack相关的命令
webpack-dev-server: webpack提供的开发环境，用于启动一个服务等操作
babel-loader: 处理js语法
@babel/preset-env: 转化js高级语法
@babel/core: babel的核心库，使用babel这个是必须的
vue-style-loader: 解析css样式，使用vue-style-loader是它可以支持服务端渲染，其他和style-loader一样
css-loader: 对css样式进行处理
vue-loader: 解析vue文件
vue-template-compiler: 解析vue模板编译
html-webpack-plugin: 打包处理html文件
webpack-merge: 用于处理多个webpack文件的合并

9. 初步配置webpack.config.js: 使值能够完成基本的客户端vue项目的打包:

// webpack专用配置文件
const path = require("path")
const VueLoader = require("vue-loader/lib/plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const resolve = (dir) => {return path.resolve(__dirname, dir)
}module.exports = {// webpack入口entry: resolve("./src/main.js"),output: {filename: "bundle.js",path: resolve("./dist")},resolve: {extensions: ['.js', '.vue']},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: ["@babel/preset-env"]}},exclude: /node_modules/},{test: /\.css$/,use: ["vue-style-loader", "css-loader"]},{test: /\.vue$/,use: 'vue-loader'}]},plugins: [// 使用vue-loader中的插件处理 .vue文件new VueLoader(),new HtmlWebpackPlugin({filename: "index.html",template: resolve("./public/index.html")})]
}

10. 分离: 打包两套代码，一套给客户端的请求使用，一套给服务端渲染使用:

• 客户端入口文件:(在src文件下新建一个client-entry.js客户端打包的入口文件)

// client-entry.js文件
import CreateApp from "./main"const { app } = createApp();
app.$mount("#app")

• 服务端入口文件: (在src文件夹下新建一个server.entry.js进行服务端文件打包)

import createApp from "./main"// 服务端需要调用当前这个文件产生一个新的vue的实例
// 服务端配置好后需要导出给node来使用
export default () => {const { app } = createApp()return app;
}

11. 分离webpack打包文件: webpack.base.js && webpack.client.js && webpack.server.js

//  webpack.base.js
// 基础的webpack配置，无论是客户端打包还是服务端打包都要基于这个
const path = require("path")
const VueLoader = require("vue-loader/lib/plugin")
const resolve = (dir) => {return path.resolve(__dirname, dir)
}module.exports = {output: {filename: "[name].bundle.js",path: resolve("../dist")},resolve: {extensions: ['.js', '.vue']},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: ["@babel/preset-env"]}},exclude: /node_modules/},{test: /\.css$/,use: ["vue-style-loader", "css-loader"]},{test: /\.vue$/,use: 'vue-loader'}]},plugins: [// 使用vue-loader中的插件处理 .vue文件new VueLoader(),]
}

//webpack.client.js
const merge = require("webpack-merge")
const base = require("./webpack.base")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const resolve = (dir) => {return path.resolve(__dirname, dir)
}
module.exports = merge(base, {// webpack入口entry: {client: resolve("../src/client-entry.js")},plugins: [new HtmlWebpackPlugin({filename: "index.html",template: resolve("../public/index.html")})]
})

const merge = require("webpack-merge")
const base = require("./webpack.base")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const resolve = (dir) => {return path.resolve(__dirname, dir)
}
module.exports = merge(base, {// webpack入口entry: {server: resolve("../src/server-entry.js")},target: "node", // 这里表示要给node来使用output: {libraryTarget: "commonjs2"   // 将这个文件最终导出的结果放到module.exports上，让node来进行使用},plugins: [new HtmlWebpackPlugin({filename: "index.ssr.html",template: resolve("../public/index.ssr.html"),excludeChunks: ['server']   // 排除某个模块不被html引入})]
})

13. 更新Koa服务端代码，让其渲染webpack打包生成的bundle文件生成渲染好的html返回:

const Koa = require("koa")
const Router = require("koa-router")
const Static = require("koa-static")
const app = new Koa();
const router = new Router()
const fs = require("fs")const VueServerRender = require("vue-server-renderer")
let serverBundle = fs.readFileSync("./dist/server.bundle.js", "utf8");
let template = fs.readFileSync("./dist/index.ssr.html", "utf8");
// 渲染webpack打包后的结果
const render = VueServerRender.createBundleRenderer(serverBundle, {template
});router.get("/", async ctx => {ctx.body = await new Promise((resolve, reject) => {render.renderToString((err, data) => {if (err) reject(err);resolve(data);})})
})app.use(router.routes());
app.listen(3000)

14. 此时打包出的结果返回到客户端的是字符串，因为使用的是renderToString,所以此时客户端的页面是没法进行事件等操作的，所以此时需要将打包生成的客户端的js文件进行引入

// 在server.js文件中加入:
const path = require("path")
// 进行静态目录托管，此时当客户端请求静态文件资源时可以到dist目录中进行查找返回
// 这里主要的目的是为了让服务端渲染的代码引入打包生成的客户端端代码文件
app.use(static(path.resolve(__dirname, "dist")))

15. 此时因为引入的客户端代码会将vue挂载在id为app的节点上，但是使用服务端打包的文件中并没有这个节点，所以客户端代码引入后仍没法挂载，此时需要在App.vue文件上将根节点设置为id为app的节点(Vue上管这个叫客户端激活)

<template><div id="app">App.Vue<Bar /></div>
</template>
<script>
import Bar from "./components/Bar";
export default {components: {Bar}
};
</script>

16. 处理打包文件:(因为这里需要在服务端生成的html文件中引入客户端打包生成的js文件，为了手动去进行引入，这里对打包配置文件进行处理)

• 修改webpack.client.js配置文件:

// 添加生成客户端打包的manifest.json的打包文件，这个插件是vue-server-render提供的
const ClientRenderPlugin = require("vue-server-renderer/client-plugin")// ...在plugins中添加这个插件:
new ClientRenderPlugin()

• 修改webpack.server.js配置文件，生成服务端打包生成的bundle和相应文件的json文件

const ServerRenderPlugin = require("vue-server-renderer/server-plugin")
// ... plugins中添加插件
new ServerRenderPlugin()

• 修改server.js文件中createBundleRenderer()处理的内容

// 此时的bundle引入为打包生成的服务端的json文件的内容
const serverBundle = require("./dist/vue-ssr-server-bundle.json")
// 引入打包生成的客户端的manifest文件
const clientManifest = require("./dist/vue-ssr-client-manifest.json")
// createBundleRenderer()该函数处理改成这样的目的是为了读取到服务端渲染生成的文件中，
// 去插入从clientManifest文件中读取出的客户端的打包内容进行自动的引入
const render = VueServerRender.createBundleRenderer(serverBundle, {template,clientManifest
});

17. 集成路由系统:

• vue ssr中的路由跳转的规则：
  在浏览器首屏渲染的时候，以及在浏览器中输入url进行切换的时候将会走到服务端渲染处理路由，而单纯的在页面间进行路由的切换则将交由客户端引入的客户端vue文件中的路由进行接管，此时切换的就是客户端的路由，不走服务端的流程. 这样的好处的是降低服务端的开销，以及用户访问的体验。

(17.1) 创建vue路由文件，在其中进行路由的配置，如下代码所示:

import Vue from "vue"
import VueRouter from "vue-router"
import Bar from "./components/Bar"
Vue.use(VueRouter)// 导出的仍然需要是一个函数工厂，这样每个客户端就会生成各自的一套路由系统
export default () => {const router = new VueRouter({mode: "history",routes: [{path: "/",component: Bar},{path: "/foo",component: () => import("./components/Foo")}]})return router;
}

(17.2) 在main.js文件中创建vue实例的时候将router注册进去:

import createRouter from "./router"
// ... 
export default () => {const router = createRouter();const app = new Vue({router,render: h => h(App)})// 导出router的目的是为了之后在服务端渲染的时候拿到这个路由进行匹配切换页面return { app, router }
}

• 这里需要注意: 此时客户端访问页面是没法进行路由切换的，这是因为此时访问的时候路由系统将会新进入到Koa中的路由匹配中去，而不是客户端的路由，所以此时需要在服务端进行路由的搜集处理

(17.3)处理server-entry.js文件中导出的方法:

import createApp from "./main"export default (context) => {// 服务端渲染时将会执行此方法const { app, router } = createApp()// 将context中传递过来的路由参数取出，调用push方法后进行路由切换，也就是渲染这个页面router.push(context.url)return app;
}

(17.4) 修改server.js文件:

router.get("/", async ctx => {ctx.body = await new Promise((resolve, reject) => {// 这里renderToString()中会调用执行的是server-entry.js中导出的方法，所以传递的参数{url:  "/"}就会传递给server-entry.js中的函数render.renderToString({url: "/"}, (err, data) => {if (err) reject(err);resolve(data);})})
})// ...在路由匹配之后添加以下逻辑
// 如果匹配不到任何的路由，将会执行到此处进行处理
// 而如果服务器中没有路由匹配，则会渲染app.vue文件
app.use(async ctx => {ctx.body = await new Promise((resolve, reject) => {render.renderToString({url: ctx.url}, (err, data) => {if (err) reject(err);resolve(data);})})
})

• 这里补充提一下的是传递给renderToStrong()方法的第一个参数将会被传递给server-entry中导出的函数

(17.5) 当切换异步组件时，对server-entry中高勇promise进行处理，同时对不存在的路由进行错误处理:(这里主要通过监听路由跳转的ready事件进行异步路由组件的处理)

export default (context) => {return new Promise((resolve, reject) => {// 服务端将会执行此方法const { app, router } = createApp()// 将context中传递过来的路由参数取出，调用push方法后进行路由切换，也就是渲染这个页面router.push(context.url);// 涉及到异步组件的问题，在路由匹配跳转成功之后在resolve出app实例router.onReady(() => {// 获取当前跳转到的匹配的组件let matches = router.getMatchedComponents();// 如果未匹配到路由，则返回404if(matches.length === 0){reject({code: 404})}resolve(app);}, reject)})
}

(17.6) 在路由未在router中匹配时(就是在server-entry中通过判断是否有匹配到组件判断reject出的{code: 404}时的情况，需要在server.js文件中渲染时进行错误捕获来返回404)

// server.js文件:
app.use(async ctx => {//  通过try..catch来捕获路由错误try{ctx.body = await new Promise((resolve, reject) => {render.renderToString({url: ctx.url}, (err, data) => {if (err) reject(err);resolve(data);})})}catch(e){ctx.body = "404 Not Found"ctx.status = 404;}
})

• 这里理一下这个未匹配路由异常的流程: 路由匹配 -> 进入server-entry中的函数执行，如果检测到未匹配的路由，则reject({code: 404})掉 -> 返回到renderToString()方法中，其err参数有值，所以在此方法中再次reject抛出异常 -> 在catch中异常被捕获，返回404页面

18. 集成Vuex:

• 注意思路: 创建好Vuex的store仓库后，主要需要注意的是在服务端的处理问题。在vue页面组件文件中可以使用一个asyncData()的方法，它接收一个store实例，可以在这个方法中实现在服务端渲染时获取数据处理，所以就需要在server-entry.js文件中处理这个方法:
  (18.1) 在src/store目录下创建获取store实例的方法:

import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)export default () => {const store = new Vuex.Store({state: {name: "MrChenGX"},mutations: {changeName(state, payload){state.name = payload;}},actions: {changeName({commit}, payload){return new Promise((resolve, reject) => {// 这里使用Promise的目的是为了处理异步的请求setTimeout(() => {commit("changeName", payload),resolve()}, 1000)})}}})return store;
}

(18.2) 在main.js文件中将store注册到导出的vue实例上

import createStore from "./store"
// ...
export default () => {const router = createRouter();const store = createStore();const app = new Vue({router,store,render: h => h(App)})// 导出router和store的目的是为了在之后服务端中做相应的处理return { app, router, store }
}

(18.3) 在entry中匹配出路由页面组件时，判断组件中是否有设置asyncData方法，如果有，则调用其执行，并将store实例传递给这个方法处理:

export default (context) => {return new Promise((resolve, reject) => {const { app, router, store } = createApp()router.push(context.url);router.onReady(() => {// 获取当前跳转到的匹配的页面组件,当匹配到值时，这里的matches就是相应的组件内容let matches = router.getMatchedComponents();if(matches.length === 0){reject({code: 404})}// 这里处理vuex中数据获取:// 当匹配到路由组件跳转时，判断组件中是否要执行asyncData获取数据，如果需要，则调用这个asyncData方法去执行数据获取等操作，而在这个asyncData方法中一般返回的是一个Promise，同时对于匹配的页面组件可能是多个，所以这里应该是一个Promise的数组，所以就需要使用Promise.all()在所有的asyncData数据处理好之后在进行渲染appPromise.all(matches.map(component =>  {if(component.asyncData){return component.asyncData(store)}})).then(() => {// 在上面的all中将会改变store中的state，所以获取store中的新的state挂到context上下文中// 而context.state上的数据将会被处理挂载到window对象上作为一个window.__INITIAL_STATE__属性值，所以这里设置的context.state是固定的写法context.state = store.state;resolve(app);})}, reject)})
}

• 这里值得注意的就是在处理asyncData方法时，其返回值会是一个Promise(这个Promise就是在actions里面返回的对象)，而且一个路由可能匹配的是一个组件数组，所以所有的asyncData()得到的就会是一个promise数组，所以这里使用的是Promise.all()方法让所有的Promise执行完.在Promise.all()中执行的逻辑将会改变store中的state

(18.4) 当在服务端调用asyncData获取数据更新store中的state后，处理了新的state放到了context.state上，通过renderToString的处理，会将这个state的值挂载到客户端的window对象上，所以在客户端获取store对象实例的时候，需要判断在window对象上是否有挂载上的__INITIAL_STATE__属性，如果有，表示在服务端已经获取了新的state数据，那么此时就需要取得这个__INITIAL_STATE__属性的数据替换掉生成的store对象中的state:

    // 在创建store的文件中(store/index.js)的创建完store对象实例后添加如下内容//当在浏览器中执行获取store的时候，则需要判断window对象上是否有 window.__INITIAL_STATE__属性// 如果有，表明在服务端渲染的时候对store中的数据进行的更改，那么此时就需要取得 window.__INITIAL_STATE__的值替换掉state中的值if(typeof window !== "undefined" && window.__INITIAL_STATE__){store.replaceState(window.__INITIAL_STATE__)}

(18.5) 在一个组件中写一个asyncData进行测试实现:

<script>
export default {asyncData(store){ // asyncData这个方法只会在服务端执行，并只会在页面组件中执行return store.dispatch("changeName", "chenshao")},methods: {handleClick() {alert("hello world");}}
};
</script>

(18.6) 此时存在一个问题: 就是不走服务端的路由，也就是从其他页面通过客户端路由切换到需要使用asyncData的页面组件中时，里面的asyncData()方法就不会走服务端的流程，也就不会获得数据，那么此时可以试着在客户端的组件生命周期中也去调用asyncData()方法来获取数据解决这个问题

最后提一下Vue的一些优化: Vue + Pwa + ssr可以实现比较好的项目效果