共计 1655 个字符，预计需要花费 5 分钟才能阅读完成。
一 背景
所谓服务端渲染，指的是把 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 端口
正文完
发表至： javascript
2020-08-22
