一背景

所谓服务端渲染，指的是把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/routerconst 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 端口

一 背景

二 开启vue-ssr之旅

1 装置依赖

2 HTML文件

3 server.js文件

一背景

二开启vue-ssr之旅