一 背景
所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：
- 更好的SEO
- SSR直接将HTML字符串传递给浏览器，大大加快了首屏加载时间
但也有缺点：
- SSR占用更多的CPU和内存资源
- 一些常用的浏览器API可能无法正常使用
- 在vue中只支持beforeCreate和created两个生命周期
ssr的原理如上图所示左侧Source部分为源代码，所有代码有一个公共入口，就是app.js，然后就是服务端的入口
（entry-server.js）和客户端的入口（entry-client.js）。当完成所有源代码的编写之后，我们通过webpack的构建，打包出两个bundle，分别是server bundle和client bundle；当用户进行页面访问的时候，先是经过服务端的入口，将vue组建组装为html字符串，并混入客户端所访问的html模板中，最终就完成了整个ssr渲染的过程。
二 开启vue-ssr之旅
1 安装依赖
yarn add vue-server-renderer vue koa koa-router ```
webpack webpack-cli webpack-dev-server vue-loader vue-style-loader css-loader html-webpack-plugin @babel/core @babel/preset-env babel-loader vue-template-compiler webpack-merge其中 vue-server-renderer 是关于vue的服务端渲染的包，KOA是node服务器的包。
2 HTML文件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>珠峰</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>vue-ssr-outlet注释不能去掉，这是Vue挂载的占位符
3 server.js文件
// vue vue-server-renderer
// koa @koa/router
const Vue = require('vue');
const fs = require('fs');
const path = require('path');
const VueServerRenderer = require('vue-server-renderer');
const vm = new Vue({
data(){
return {
name:'zf',
age:10
}
},
template:`<div>{{name}} 今年 {{age}} 岁了 </div>`
});
const Koa = require('koa');
const Router = require('@koa/router');
const template=fs.readFileSync(path.resolve(__dirname,'index.html'),'utf8')
const render = VueServerRenderer.createRenderer({
template// 采用哪个模板去渲染
});
let app = new Koa(); // 产生一个app的实例
let router = new Router(); // 产生一个路由的实例
router.get('/',async (ctx)=>{
ctx.body = await render.renderToString(vm);
})
app.use(router.routes()); // 将路由注册到应用上
app.listen(3000); //监听3000 端口
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。