一 背景
所谓服务端渲染，指的是把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 端口
发表回复